反应路由器不响应参数答案

【问题标题】：React router not responding to params反应路由器不响应参数
【发布时间】：2021-07-13 19:39:59
【问题描述】：

希望你一切顺利:)

我的 React 路由器没有通过参数响应 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 to="/games/euromillions">
        <div className="games-list">
          <h4>Euromillions</h4>
          <img src={euro} alt="euro" />
        </div>
      </Link>

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

我试过了：

更改参数名称；
将 Gamepage 组件更改为其他内容；
将链接标签更改为其他位置（不适用于参数）；

【问题讨论】：

标签： reactjs parameters react-router

【解决方案1】：

当 react 路由器检查 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;

【讨论】：

您好！非常感谢您的宝贵时间，这很有意义并且很有效；）

【解决方案2】：

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

【讨论】：

您好！非常感谢，我去看看;)

【解决方案3】：

您应该在第一个/game url 捕捉器之前放置一个exact。这样它就不会捕获所有以“游戏”开头的网址

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>
  );
};

【讨论】：