时间戳

首页 > 解决方案 > React Router 更改 URL，但 BrowserRouter 不更改查看的组件

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

问题描述

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

默认域

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

点击道具链接后 在此处输入图像描述

标签： javascriptreactjsreact-router

解决方案

除了@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只允许有一个孩子。

推荐阅读