React路由器未响应参数

Question

希望你进展顺利：(

我的React路由器没有通过params响应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>

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

我试过：

1. 更改参数名称
2. 将Gamepage组件更改为其他组件
3. 将链接标签更改为其他位置(不适用于params(

Answer 1

当react路由器检查Switch组件中的链接时，它会检查浏览器中的url是否以Route组件中定义的链接开始，并转到第一个匹配的路由。因此，当浏览器中的url为/games/euromillions时，react router会经过Route组件中定义的所有链接，在您的情况下，当它到达/games路由时，它会从/games/euromillions开始停止，从/games开始，然后渲染该组件。它从未到达/games/:id路由。有两种选择可以解决此问题。

1. 您可以将/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;

2. 您将确切的选项添加到/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;

Answer 2

它之所以保留在游戏页面上，是因为您有多个名称相似的链接。您可以使用确切的关键字来匹配您想要导航用户到的完全相同的路线。您可以阅读它回答的这个问题，并解释我们应该如何以及在哪里使用确切的关键词。

Answer 3

您应该在第一个/gameurl捕获器之前放置一个exact。这样它就不会捕获所有以"开头的url；游戏"；

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