React Router 更改 URL，但 BrowserRouter 不会更改查看的组件 [英] React Router Changes URL, but BrowserRouter doesn't change Viewed Component

问题描述

我正在做的项目有点敏感，但这是我可以向大家展示的内容.

当我单击 NavBar 中的 s 之一时，它会更改 URL，但不会将视图更改为正确的组件.有谁知道为什么?如果我有更好的方式来表达这一点或提高我的任务质量，请告诉我.

我返回的渲染

<浏览器路由器><div><开关><Route path="/propertytypes" component={PropertyTypes}/><Route path="/entitytypes" component={EntityTypes}/><Route path="/associationtypes" component={AssociationTypes}/><Route path={Routes.ROOT} component={Test}/></开关>

</BrowserRouter>

我的导航栏

import React, { Component } from "react";从react-router-dom"导入{链接}；类导航栏扩展组件{使成为() {返回 (<div><ul><li><Link to="/propertytypes">Props!</Link><li><Link to="/entitytypes">Ent!</Link><li><Link to="/associationtypes">混蛋！</Link>

);}}导出默认导航栏；

点击道具链接后

解决方案

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

<块引用>

警告:失败的上下文类型:上下文router被标记为Link 中需要，但其值为 undefined.

所以为了避免问题和链接开始工作，你的渲染应该是这样的:

<div><导航栏/><开关><Route path="/propertytypes" component={PropertyTypes}/><Route path="/entitytypes" component={EntityTypes}/><Route path="/associationtypes" component={AssociationTypes}/><Route path={Routes.ROOT} component={Test}/></开关>

</BrowserRouter>

请注意，我将 NavBar 组件放在 div 中，因为 BrowserRouter 只允许有一个孩子.

The project I am working on is kinda of sensitive, but here's what I have that I can show you all.

When I click on one of the s in my NavBar, it changes the URL, but it does not change the view to the proper component. Does anyone have any idea why? If there's a better way I can phrase this or improve the quality of my questin, let me know.

My render that I return

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

My NavBar

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;

After clicking Props link

解决方案

Besides what @Ukasyah noticed about disparity between the Router you are using (you say you are using BrowserRouter) and the screen captures with the URL you are getting (that points out you are using HashRouter), you must be getting a problem with the code you are showing up because the <Link> component in order to work must be contained inside the BrowserRouter. In your browser console it must be happening this error:

Warning: Failed context type: The context router is marked as required in Link, but its value is undefined.

So to avoid the problem and links start to work, your render should be something like this:

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

Note that I put the NavBar component inside the div because BrowserRouter only allows to have a single child.

这篇关于React Router 更改 URL，但 BrowserRouter 不会更改查看的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！