React Router 在重新加载时工作，但在单击 link 时不工作

Question

我已经使用 react-router 版本 4 设置了 React。当我直接在浏览器上输入 URL 时路由有效，但是当我点击 link 时，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如下：

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

Answer 1

用 withRouter 包装您的组件应该可以为您完成这项工作。 withRouter 对于使用 Link 或任何其他 Router 道具并且不直接从 Route 或 Parent Component

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>

然而，当您想为高度嵌套的组件提供 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);

Answer 2

我会检查您的组件并确保您只有一个 <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）。

Answer 3

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

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

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

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

删除 space 修复它：

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

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

Answer 4

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

Answer 5

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

Answer 6

您不应该将导航栏换行，或者

我之前也遇到过同样的问题。错误是我将导航栏组件包装在一个你应该只在主组件中使用的组件中 (App.js)

Answer 7

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

Answer 8

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

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

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

React Router 在重新加载时工作，但在单击 link 时不工作

React Router work on reload, but not when clicking on a link

reactjs

react-router

react-redux

react-router-redux

react-router-v4