反应路由器不响应参数

Question

希望你一切顺利:)

我的 React Router 没有通过参数响应 URL 中的更改。这是 App.js:

import React, { useContext } from "react";
import { Switch, Route } from "react-router";
import NavBar from "../Navbar/Navbar";
import Homepage from "../Homepage/Homepage";
import Shops from "../Shops/Shops";
import Products from "../Products/Products";
import Games from "../Games/Games";
import Gamepage from "../Commons/Gamepage";

const App = () => {
  
  return (
    <React.Fragment>
      <NavBar token={token} />
      <Switch>
        <Route path="/homepage" component={Homepage} />
        <Route path="/shops" component={Shops} />
        <Route path="/products" component={Products} />
        <Route path="/games" component={Games} />
        <Route
          path={`/games/:id`}
          render={(props) => <Gamepage {...props} />}
        />
        <Route path="/" component={Homepage} />
      </Switch>
    </React.Fragment>
  );
};

export default App;

这是游戏页面：

import React from "react";

const Gamepage = () => {
  return <h1>Hello</h1>;
};
export default Gamepage;

这里是 link:

<Link to="/games/euromillions">
        <div className="games-list">
          <h4>Euromillions</h4>
          <img src={euro} alt="euro" />
        </div>
      </Link>

所有其他 Link（如导航栏）都在工作...但是当我单击这个特定的 link 时，它不起作用，停留在游戏页面中：/

我试过：

更改参数名称；
将游戏页面组件更改为其他组件；
将 Link 标记更改为其他位置（不适用于参数）；

Answer 1

你应该在第一个 /game url 接球手前放一个 exact。这样它就不会捕获所有以“game”开头的 urls

const App = () => {
  
  return (
    <React.Fragment>
      <NavBar token={token} />
      <Switch>
        <Route path="/homepage" component={Homepage} />
        <Route path="/shops" component={Shops} />
        <Route path="/products" component={Products} />
        <Route exact path="/games" component={Games} />
        <Route
          path={`/games/:id`}
          render={(props) => <Gamepage {...props} />}
        />
        <Route path="/" component={Homepage} />
      </Switch>
    </React.Fragment>
  );
};

Answer 2

它留在游戏页面的原因是您有多个名称相似的链接。您可以做的是使用 exact 关键字来匹配您要将用户导航到的完全相同的路线。您可以阅读此它已经回答了我们应该如何以及在何处使用 exact 关键字的解释。

Answer 3

当反应路由器检查 Switch 组件中的链接时，它会检查浏览器中的 url 是否以 Route 组件中定义的链接开头并转到到第一个匹配的路线。因此，当浏览器中的 url 为 /games/euromillions 时，React 路由器会遍历 Route 组件中定义的所有链接，在您的情况下，当它到达 /games 路由时，它会停在那里，因为 /games/euromillions，以 /games 开始，然后渲染该组件。它永远不会到达 /games/:id 路线。有两个选项可以解决此问题。

您可以将 /games/:id 路线放在 /games 路线上方。

import React, { useContext } from "react";
import { Switch, Route } from "react-router";
import NavBar from "../Navbar/Navbar";
import Homepage from "../Homepage/Homepage";
import Shops from "../Shops/Shops";
import Products from "../Products/Products";
import Games from "../Games/Games";
import Gamepage from "../Commons/Gamepage";

const App = () => {
  
  return (
    <React.Fragment>
      <NavBar token={token} />
      <Switch>
        <Route path="/homepage" component={Homepage} />
        <Route path="/shops" component={Shops} />
        <Route path="/products" component={Products} />
        <Route
          path={`/games/:id`}
          render={(props) => <Gamepage {...props} />}
        />
        <Route path="/games" component={Games} />
        <Route path="/" component={Homepage} />
      </Switch>
    </React.Fragment>
  );
};

export default App;

您将确切的选项添加到 /games 路线

import React, { useContext } from "react";
import { Switch, Route } from "react-router";
import NavBar from "../Navbar/Navbar";
import Homepage from "../Homepage/Homepage";
import Shops from "../Shops/Shops";
import Products from "../Products/Products";
import Games from "../Games/Games";
import Gamepage from "../Commons/Gamepage";

const App = () => {
  
  return (
    <React.Fragment>
      <NavBar token={token} />
      <Switch>
        <Route path="/homepage" component={Homepage} />
        <Route path="/shops" component={Shops} />
        <Route path="/products" component={Products} />
        <Route path="/games" component={Games} exact/>
        <Route
          path={`/games/:id`}
          render={(props) => <Gamepage {...props} />}
        />
        <Route path="/" component={Homepage} />
      </Switch>
    </React.Fragment>
  );
};

export default App;

反应路由器不响应参数

React router not responding to params

parameters

reactjs

react-router