Question

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

当我单击NavBar中的s之一时，它会更改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;

点击“道具”链接后

Answer 1

@Ukasyah注意到关于您正在使用的路由器（您说您正在使用BrowserRouter）和屏幕截图以及所获取的URL之间的差异（指出您正在使用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。与here相同。

Answer 3

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

Answer 4

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

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

然后我开始将所有内容拆分为单独的布局文件，例如 this。所以我最初在多个文件之间复制了整个导入。在某些时候，我正在清理代码并意识到我只需要导入 Switch，但我愚蠢地忘记了删除 BrowserRouter as，结果是：

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

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

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

4 个答案: