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

Question

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

当我单击 NavBar 中的其中一个时，它会更改 URL，但不会将 View 更改为正确的组件。有谁知道为什么？如果我有更好的表达方式或提高我的问题的质量，请告诉我。

我返回的渲染图

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

点击 Prop 链接后

Answer 1

除了@Ukasyah 注意到你正在使用的路由器(你说你正在使用 BrowserRouter )和你正在获取的 URL 的屏幕截图(指出你正在使用 HashRouter )之间的差异之外，你必须因为 <Link> 出现的代码出现问题组件必须包含在 BrowserRouter 中才能工作.在您的浏览器控制台中，它一定会发生此错误:

Warning: Failed context type: The context router is marked as required in Link, but its value is 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只允许有一个 child 。