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，您一定遇到了代码问题之所以出现，是因为<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只允许有一个孩子。