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

Question

我已经使用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;

Answer 1

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

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

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

Answer 2

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

Answer 3

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

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

Answer 4

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

Answer 5

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

Answer 6

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

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

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

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

删除空间修复它：

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

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

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

Answer 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) 中。