React Router 更改 URL，但 BrowserRouter 不会更改查看的组件

Question

我正在从事的项目有点敏感，但这是我可以向大家展示的内容。

当我单击 NavBar 中的 s 之一时，它会更改 URL，但不会将视图更改为正确的组件。 有谁知道为什么？ 如果有更好的方法可以表达或提高我的 questin 的质量，请告诉我。

我返回的渲染

<NavBar />
<BrowserRouter>
  <div>
    <Switch>
      <Route path="/propertytypes" component={PropertyTypes} />
      <Route path="/entitytypes" component={EntityTypes} />
      <Route path="/associationtypes" component={AssociationTypes} />
      <Route path={Routes.ROOT} component={Test} />
    </Switch>
  </div>
</BrowserRouter>

我的导航栏

import React, { Component } from "react";
import { Link } from "react-router-dom";

class NavBar extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            <Link to="/propertytypes">Props!</Link>
          </li>
          <li>
            <Link to="/entitytypes">Ent!</Link>
          </li>
          <li>
            <Link to="/associationtypes">Ass!</Link>
          </li>
        </ul>
      </div>
    );
  }
}

export default NavBar;

点击道具链接后

Answer 1

除了@Ukasyah 注意到您正在使用的路由器（您说您使用的是BrowserRouter ）与您获得的 URL 的屏幕截图（指出您使用的是HashRouter ）之间的HashRouter ，您一定是代码有问题您之所以出现是因为<Link>组件必须包含在BrowserRouter中才能工作。 在您的浏览器控制台中，它必须发生此错误：

警告：失败的上下文类型：上下文router在Link标记为必需，但其值为undefined 。

所以为了避免这个问题和链接开始工作，你的渲染应该是这样的：

<BrowserRouter>
  <div>
    <NavBar />
    <Switch>
      <Route path="/propertytypes" component={PropertyTypes} />
      <Route path="/entitytypes" component={EntityTypes} />
      <Route path="/associationtypes" component={AssociationTypes} />
      <Route path={Routes.ROOT} component={Test} />
    </Switch>
  </div>
</BrowserRouter>

请注意，我将NavBar组件放在div因为BrowserRouter只允许有一个孩子。

Answer 2

我一直在寻找不同的 SO 问题来解决这个问题，但没有一个有帮助。 我的问题是在多个不同的组件中使用 BrowserRouter。 和这里一样。

Answer 3

对我来说，问题是我的整个应用程序都被一个<Router>包裹，因为样板代码就是这样设置的。 然后我从 BrowserRouter 文档中复制片段，并没有删除代码周围的<BrowserRouter>包装器。 嵌套路由器将无法正常工作。

Answer 4

我犯的错误是，我从文档中的设置开始，其中涉及使用：

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

然后，我开始分裂万事成独立的布局文件像这样。 所以我最初在多个文件之间复制了整个导入。 在某些时候，我正在清理代码并意识到我只需要导入Switch但我愚蠢地忘记删除BrowserRouter as ，我最终得到：

import { BrowserRouter as Switch } from "react-router-dom";

这显然是错误的，因为它将 BrowserRouter 映射到 Switch，您不能嵌套 BrowserRouter ，这就是在我的情况下引入问题的原因。