React Router 在重新加载时起作用，但在单击链接时不起作用

Posted 2023-02-21

【中文标题】React Router 在重新加载时起作用，但在单击链接时不起作用

【英文标题】：React Router work on reload, but not when clicking on a link

【发布时间】：2017-11-05 11:37:24

【问题描述】：

我已经使用react-router 版本 4 设置了 React。当我直接在浏览器上输入 URL 时，路由可以工作，但是当我点击链接时，浏览器上的 URL 会发生变化（例如 http://localhost:8080/categories），但是内容不会更新（但如果我刷新，它会更新）。

以下是我的设置：

Routes.js 设置如下：

import  Switch, Route  from 'react-router-dom';
import React from 'react';

// Components
import Categories from './containers/videos/Categories';
import Videos from './containers/videos/Videos';
import Home from './components/Home';

const routes = () => (
  <Switch>
    <Route exact path="/" component=Home/>
    <Route path="/videos" component=Videos/>
    <Route path="/categories" component=Categories/>
  </Switch>
);

export default routes;

我在Nav.js中使用的链接如下：

<Link to="/videos">Videos</Link>
<Link to="/categories">Categories</Link>

App.js如下：

import React from 'react';
import './app.scss';
import Routes from './../routes';
import Nav from './Nav';

class AppComponent extends React.Component 

  render() 
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  


AppComponent.defaultProps = 
;

export default AppComponent;

【问题讨论】：

你的BrowserRouter在哪里

您的问题解决了吗？我有完全相同的问题，我对您的最终解决方案感兴趣。

@dns_nx 我遇到的问题是将 放在错误的位置。正确的是在这个 pastebin 中：pastebin.com/M9hU4Bg4

@SuthanBala - 你最新的 commet 救了我 - 在 6 小时（？！）转圈之后。我根本没有使用 BrowseRouter ...只是路由器。哎呀...

【参考方案1】：

Hanly Nadackal 的答案是我找到解决方案的地方。

正如history 软件包存储库中的一个问题中所述，v5 不应用于react-router v5。 https://github.com/remix-run/history/issues/893#issuecomment-905959905

将我的package.json 的history 降级为^4.10.1 解决了这个问题。

【参考方案2】：

如果有人使用history 包进行导航并且您使用的是react-router v5，那么您可能必须将history 包降级为4.10.1，直到history 包开发人员发布新版本与修复。在撰写本文时，history 软件包的最新版本是v5.0.1，如果您看到比这更新的版本，您可以先尝试使用该版本，看看它是否有效，然后再降级到4.10.1

【参考方案3】：

您不应该将存储您的导航栏包装起来或

我之前也遇到过同样的问题。错误是我将导航栏组件包装在您应该仅在主组件中使用（App.js）

【参考方案4】：

整个app应该只有一个ROUTER，我认为如果你的头文件是App.js，那么ROUTER应该包裹整个App.js组件。

【参考方案5】：

我遇到这个问题是因为我没有在应用程序（package.json）依赖项中安装react-router...

【参考方案6】：

我遇到了完全相同的问题，但我的原因要简单得多。

在我的例子中，我在 URL 字符串的末尾有一个空格：

<Link to= "/myentity/" + id + "/edit "  >Edit</Link>

当我点击链接时不起作用，但 URL 会在地址栏中更新。点击浏览器地址栏并点击enter 键即可正常工作。

删除空间修复它：

<Link to= "/myentity/" + id + "/edit"  >Edit</Link>

我想这很明显，但很容易被忽视。在我注意到之前拉了几根头发（很明显我在这里结束了），希望它可以为其他人节省几根头发。

【讨论】：

谢谢！很容易被忽视

【参考方案7】：

用withRouter 包裹你的组件应该可以为你完成这项工作。 withRouter 是使用 Link 或任何其他 Router 道具并且不直接从 Route 或 Parent Component 接收 Router props 的组件所必需的

当组件被调用时，Router Props 可供组件使用

<Route component=App/>

或

<Route render=(props) => <App ...props/>/>

或者如果您将Links 放置为Router 标签的直接子代，例如

<Router>
     <Link path="/">Home</Link>
</Router>

如果您希望将 Router 中的子内容作为组件编写，例如

<Router>
     <App/>
</Router>

Router props 对 App 不可用，因此，您可以使用类似 Route 的方式调用它

<Router>
     <Route component=App/>
</Router>

但是，当您想为高度嵌套的组件提供路由器道具时，withRouter 会派上用场。检查此解决方案

import withRouter from 'react-router'

class AppComponent extends React.Component 

  render() 
    return (
      <div className="index">
        <Nav />
        <div className="container">
          <Routes />
        </div>
      </div>
    );
  


AppComponent.defaultProps = 
;

export default withRouter(AppComponent);

【讨论】：

还是没有运气:(

Nvm，我把 browserhistory 放在了错误的位置。调整它修复它。

你在哪里调整的，我也有同样的问题，你能发布一个完整的解决方案吗？

如果使用 react-redux 中的连接，则将 withRouter 包裹在该连接周围。例如：export default withRouter(connect(mapStateToProps)(App))。解决方案在这里***.com/a/45082976/3714697

【参考方案8】：

我会检查你的组件并确保你只有一个<Router> ... </Router>。另外——确保你有一个<Router>...</Router>在某些情况下你可能会使用多个，但如果你不小心有嵌套的路由器（因为你快速破解并忘记删除一个您将它移动到各种地方;-) - 这可能会导致问题。

我会试试的

import 
  BrowserRouter as Router,
  from 'react-router-dom'

// Other Imports

...

return (
  <Router>
    <div className="index">
      <Nav /> <!-- In this component you have <Links> -->
      <div className="container">
        <Routes />
      </div>
    </div>
  </Router>
);

在您最顶层的组件 (App.js) 中。

【讨论】：

Double <Router/> 是我的问题。

切换到浏览器路由器而不是路由器为我工作！谢谢

这个解决方案对我有用。我在我的应用中使用了双路由器。