javascript - React Router dom不路由

Question

我正在 Codesandbox.io 上构建简单的应用程序，我正在努力做路线，实际上我正在遵循教程，但它对我不起作用。

这是我的代码，它包含四个文件(index、Start、Home 和 Nav)，这些文件除了显示一个单词(Home 或 start here)之外什么都没有，这是我的主文件(index.js )

import React from "react";
import ReactDom from "react-dom";
import { BrowserRouter as Router, Route } from "react-router-dom";

import "./styles.css";
import "./news.css";
import Nav from "./Nav";
import Home from "./Home";
import Start from "./Start";

class Index extends React.Component {
  render() {
    return (
      <div>
        <div className="container"> start here </div>
        <Router>
          <div>
            <Nav />
            <Route exact path="/" Component={Index} />
            <Route path="/Home" Component={Home} />
            <Route path="/Start" Component={Start} />
          </div>
        </Router>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDom.render(<Index />, rootElement);

这是我的 Home.js

import React from "react";

class Home extends React.Component {
  render() {
    return <div>home</div>;
  }
}

export default Home;

导航.js

import React from "react";
import { Link } from "react-router-dom";

const Nav = () => {
  return (
    <div>
      <Link to="/">Home</Link>
      <Link to="/Home"> home 2 class </Link>
      <Link to="/Start"> Start </Link>
    </div>
  );
};

export default Nav;

Start.js

import React from "react";

class Start extends React.Component {
  render() {
    return <div>start here</div>;
  }
}

export default Start;

Answer 1

你很接近，你有 Component={Home} 大写，你应该有 component 小写，就像这样。

我似乎无法编辑您的沙箱，因为 Index 破坏了我的代码，但是，总的来说，这似乎是您的问题。

或者，您也可以尝试使用 render 方法来显示相应的组件 - Route Render Methods

干杯! 吉米