React 路由器 V5 更新 URL 但不刷新页面

Question

react router 不会更新视图，而是更改 url。

Navbar.js：

import React from "react";
import logo from "../Assets/imgs/Logo/WHITELOGOkatman 1.png";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
class Navbar extends React.Component {
  render() {
    return (
      <div className="header">
        <img className="logo" src={logo} alt="logo" />
        <Router>
          <nav>
            <ul className="nav_links">
              <Link to="/">
                <li>Home</li>
              </Link>
              <Link to="/process">
                <li>Process</li>
              </Link>
              <Link to="/career">
                <li>Career</li>
              </Link>
              <Link to="/about">
                <li>About</li>
              </Link>
            </ul>
          </nav>
        </Router>
      </div>
    );
  }
}
export default Navbar;

这是我的 App.js

import React from "react";
import "./App.css";
import "./Components/Styles/style.css";
import "bootstrap/dist/css/bootstrap.css";
import Navbar from "./Components/Navbar";
import About from "./Components/About";
import Home from "./Components/Home";
import Career from "./Components/Career";
import Footer from "./Components/Footer";
import notFoundPage from "./Components/404";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
function App() {
  return (
    <div className="App">
      <Navbar />
      <Router>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/career" component={Career} />
          <Route path="/notfound" component={notFoundPage} />
        </Switch>
      </Router>
      <Footer />
    </div>
  );
}

export default App;

我尝试过的：

1. 我已尝试使用 withRouter 导出我在路由器内部渲染的所有组件。页面仍然没有重新加载。
2. 我尝试将路由器组件设置为*组件，但没有成功。
3. 我已尝试将 li 项设置为链接，但这并没有达到我想要的效果。
4. 我尝试了一些解决方案，例如在链接标签顶部添加一个开关，然后从路由器标签中移除开关，但仍然没有任何效果。
5. 我也尝试过切换路线的顺序以在路线的尽头做家。还是什么都没有。

Answer 1

请尝试以下两件事：

• 首先确保您的 Route 的顺序如下：

<Switch>
  <Route path="/about" component={About} />
  <Route path="/career" component={Career} />
  <Route path="/notfound" component={notFoundPage} />
  <Route exact path="/" component={Home} />
</Switch>

• 删除<Nav> 中的<Router> 并使用<Router> 将<App> 中的所有内容包裹起来...像这样：

function App() {
  return (
    <Router>
      <div className="App">
        <Navbar />
          <Switch>
            <Route exact path="/" component={Home} />
            <Route path="/about" component={About} />
            <Route path="/career" component={Career} />
            <Route path="/notfound" component={notFoundPage} />
          </Switch>
        <Footer />
      </div>
    </Router>
  );
}

我认为值得注意的是，根据我的经验，我已经意识到<Router> 只需要 1 个孩子。所以在你的情况下，你使用了两次<Router>。

---

我可能还想通过将您的 <Router> 放入 index.js 文件来进一步简化它：

ReactDOM.render(
   <Router>
      <App />
   </Router>,
   containerElement
);