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

我正在从事的项目有点敏感，但是我可以向所有人展示这些。



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

单击“Props”链接后，

最佳答案

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



因此，为避免该问题和链接开始起作用，您的渲染应如下所示:

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