反應路由器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;

Nav.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

干杯! 吉米

Answer 2

您錯過了switch ，您必須使用switch進行路由。

像這樣的導入開關。

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

然后使用開關更新渲染

  <Router>
    <Switch>
        <div className="container">
            <Nav />
            <Route exact path="/" Component={Index} />
            <Route path="/Home" Component={Home} />
            <Route path="/Start" Component={Start} />
        </div>
    </Switch>
</Router>