Question

希望你一切顺利:)

我的 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 组件更改为其他内容；
将链接标签更改为其他位置（不适用于参数）；

Answer 1

它留在游戏页面的原因是您有多个名称相似的链接。您可以做的是使用精确关键字来匹配您希望将用户导航到的完全相同的路线。您可以阅读这篇question，它已经回答了我们应该如何以及在何处使用确切关键字的说明。

Answer 2

当 react 路由器检查 Switch 组件中的链接时，它会检查浏览器中的 url 是否以 Route 组件中定义的链接开头并转到第一个匹配的路由。因此，当浏览器中的 url 为 /games/euromillions 时，react router 会遍历 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;

Answer 3

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

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

反应路由器不响应参数

3 个答案: