反应路由器不响应参数

Posted 2023-02-21

【中文标题】反应路由器不响应参数

【英文标题】：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  />
        </div>
      </Link>

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

我试过了：

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

【参考方案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>
  );
;