Javascript React路由器更改URL，但BrowserRouter不'；不更改已查看的组件

我正在做的项目有点敏感，但我有一些东西可以展示给大家

当我单击导航栏中的某个按钮时，它会更改URL，但不会将视图更改为正确的组件。有人知道为什么吗？如果有更好的方法，我可以表达这一点或提高我的奎斯汀质量，让我知道

我返回的渲染

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

import React，{Component}来自“React”；
从“react router dom”导入{Link}；
类导航栏扩展组件{
render（）{
返回(


道具！


耳鼻喉科！


屁股！


);
}
}
导出默认导航栏；

点击道具链接后

---

除了@Ukasyah注意到您正在使用的路由器（您说您正在使用

BrowserRouter

）与您获得的URL屏幕截图（指出您正在使用

HashRouter

）之间的差异之外，您显示的代码一定有问题，因为

组件必须包含在

浏览器路由器中才能工作。在浏览器控制台中，必须发生以下错误：

警告：失败的上下文类型：上下文
路由器
标记为
在
链接
中需要，但其值为
未定义

因此，为了避免问题和链接开始工作，渲染应该如下所示：

<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
只允许有一个孩子。
我一直在研究不同的SO问题来解决这个问题，但没有一个问题有帮助。我的问题是在多个不同的组件中使用BrowserRouter。与。
对我来说，问题是我的整个应用程序都用
包装，因为样板代码就是这样设置的。然后我从BrowserRouter文档中复制剪报，并没有删除代码周围的
包装。嵌套路由器无法正常工作。
我犯的错误是，我从文档中的设置开始，其中包括使用：

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

然后我开始将所有内容拆分为单独的布局文件，如。因此，我最初在多个文件之间复制了整个导入。在某个时刻，我正在清理代码，并意识到我只需要导入
交换机
，但我愚蠢地忘记将
浏览器路由器作为
移除，结果是：

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

这显然是错误的，因为它将BrowserRouter映射到交换机，所以不能使用嵌套的BrowserRouter，这就是我的案例中出现的问题。
您真的在使用BrowserRouter吗？但是，我看到的是HashRouter。非常感谢！我想知道为什么它没有按预期工作。最后我把它放进了我的浏览器路由器，结果找到了。react router不再使用哈希思想，对吗？是的，他们仍然可以使用，但你必须记住，它与浏览器历史记录连接不好。这是我的关键：
注意，我将导航栏组件放在div中，因为BrowserRouter只允许有一个孩子。
以下不是修复方法，但我建议试试NextJS。使路由更简单。同意。我只是想，无论谁在搜索“url更新，但视图不是”都可能会看到这一点，如果他们犯了与我相同的错误，希望这会有所帮助。