查看不会更新，但URL在React Router V6中会显示

如何解决查看不会更新，但URL在React Router V6中会显示

我正在使用反应路由器V6 ，并且已按照本教程进行路由设置：https://blog.logrocket.com/react-router-v6/ 但是当我单击导航菜单中的链接时视图不会更新。

访问localhost:3000/Crime会显示正确的组件。
访问localhost:3000 /会显示正确的分量。

但是单击链接时，视图不会更新，但是url路径会更新。

游戏组件：

import React,{ Component } from "react";
//import Component from 'react-dom';
import SideBarRight from "./components/game/sideBarRight.jsx";
import SideBarLeft from "./components/game/sideBarLeft.jsx";
import Crime from "./components/game/crime.jsx";

import "./gameComponent.css";
import { BrowserRouter as Router,Routes,Route,Link } from "react-router-dom";

class GameComponent extends Component {
  constructor() {
    super();
    this.state = { color: "red" };
  }

  render() {
    return (
      <div className="main">
        data testing:
        <Router>
          <nav style={{ margin: 10 }}>
            <Link to="/" style={{ padding: 5 }}>
              Home
            </Link>
            <Link to="/crime" style={{ padding: 5 }}>
              Crime
            </Link>
          </nav>
          <Route path="/" element={<SideBarRight />} />
          <Route path="/crime" element={<Crime />} />
        </Router>
      </div>
    );
  }
}

export default GameComponent;

犯罪成分：

import React,{ Component } from "react";
//import Component from 'react-dom';
import "./../../gameComponent.css";

class Crime extends Component {
  constructor() {
    super();
    this.state = {
      color: "red",user: {
        cash: 0,bank: 0,weapon: "",username: "test",locationname: "Bankok",defence: 0,},rankbar: { rankpercent: 50,rank: "Mafia" },};
  }

  render() {
    return <span>crimeday</span>;
  }
}

export default Crime;

侧边栏：

import React,{ Component } from "react";
//import Component from 'react-dom';
import "./../../gameComponent.css";
import {
  BrowserRouter,BrowserRouter as Router,Switch,Link,} from "react-router-dom";

class SideBarLeft extends Component {
  constructor() {
    super();
    this.state = { color: "red" };
  }

  render() {
    return (
      <div className="content_sidebar">
        <div className="header">
          <span>Computerbar1</span>
        </div>
        <BrowserRouter>
          <ul>
            <li>
              <Link to="/">Clear</Link>
            </li>
            <li>
              <Link to="/crime">Crime</Link>
            </li>
          </ul>
        </BrowserRouter>
      </div>
    );
  }
}

export default SideBarLeft;

解决方法

您可以尝试像这样将exact添加到您的Route

<Route exact path="/" element={<SideBarRight />} />
<Route path="/crime" element={<Crime />} />

原因是"/"和"/crime"都以/开头，而没有exact关键字，React认为它们都是相同的路径。

编辑：在https://reactrouter.com/web/api/Route/exact-bool上exact的更多信息

,

对于react-router v5：

使用Switch和exact：

<Switch>
  <Route exact path="/" element={<SideBarRight />} />
  <Route exact path="/crime" element={<Crime />} />
</Switch>

Switch渲染与位置匹配的第一个子元素Route或Redirect。并且当exact为true时，仅当路径与location.pathname完全匹配时，路由才会匹配。

例如，如果您的路由具有嵌套的子路由，例如，如果exact中有/crimes/summary或/crimes/details等作为子路由，则不应使用/crimes。

---

如果您使用react-router v6（如here所述，则将Switch替换为Routes，并且由于所有{ {1}}路径默认情况下完全匹配 ：

exact

此外，您不需要多次使用<Route>，因此您的<BrowserRouter> <nav style={{ margin: 10 }}> <Link to="/" style={{ padding: 5 }}> Home </Link> <Link to="/crime" style={{ padding: 5 }}> Crime </Link> </nav> <Routes> <Route path="/" element={<SideBarRight />} /> <Route path="/crime" element={<Crime />} /> </Routes> </BrowserRouter> 看起来像：

BrowserRouter

,

首先，我想您在这里使用的是React Router V6版本，如果它是稳定的V5版本，那么在上述使用<Switch>的解决方案中，“精确”绝对可以。

我在您的代码中看到的错误是：

1. 在GameComponent中，使用<Route>将<Routes>路径括起来，如下所示，否则'/'将同时匹配'/'和'/ crime'

      <Routes>
           <Route path="/" element={<SideBarRight />} />
           <Route path="/crime" element={<Crime />} />
      </Routes>

1. 从<BrowserRouter>组件中删除<SideBarRight>，对于该应用程序只应添加一次