視圖不會更新，但 URL 在 React Router V6 中會更新

Question

我正在使用react router 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,
  Route,
  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;

Answer 1

您可以嘗試像這樣將exact添加到您的Route

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

原因是"/"和"/crime"都以/開頭，如果沒有exact關鍵字，React 認為它們是相同的路徑。

編輯：更多的信息exact這里https://reactrouter.com/web/api/Route/exact-bool

Answer 2

對於反應路由器 v5：

使用Switch和精確：

<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子路線。

---

如果您使用的反應路由器V6 ，作為解釋在這里，您更換Switch與Routes ，你不需要使用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 ，因此您的SideBarRight可能如下所示：

function SideBarRight() {
  return (
    <div className="content_sidebar">
      <div className="header">
        <span>Computerbar1</span>
      </div>
      {/* <BrowserRouter> -> NOT REQUIRED */}
      <ul>
        <li>
          <Link to="/">Clear</Link>
        </li>
        <li>
          <Link to="/crime">Crime</Link>
        </li>
      </ul>
      {/* </BrowserRouter> */}
    </div>
  );
}

Answer 3

首先，我猜你在這里使用的是 React router V6 版本，如果它是穩定的 V5 版本，上面使用<Switch>解決方案，'exact' 絕對可以正常工作。

我在您的代碼中看到的錯誤是：

1. 在 GameComponent 中，使用<Routes>將<Route>路徑括起來，如下所示，否則 '/' 將匹配 '/' 和 '/crime'

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

2. 從<SideBarRight>組件中刪除<BrowserRouter> ，它應該只為應用程序添加一次