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

IT技术 reactjs react-router react-redux react-router-redux react-router-v4
2021-03-23 06:40:15

我已经设置了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;
6个回答

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

切换到 Browserrouter 而不仅仅是 Router 为我工作！谢谢
2021-05-23 06:40:15
<Router/>在我的情况下，Double是问题所在。
2021-05-30 06:40:15
这个解决方案对我有用。我在我的应用程序中使用了双路由器。
2021-06-13 06:40:15

包裹你的组件withRouter应该为你完成这项工作。withRouter使用Link或 任何其他Routerprops并且不Router props直接从Route或从Parent Component

当组件被调用时，路由器props可用于组件

<Route component={App}/>

或者 

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

或者，如果您将LinksRouter 标签的as 直接子项放置在

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

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

<Router>
     <App/>
</Router>

路由器props将不可用于 App，因此，您可以使用类似的 Route 传递调用它

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

但是，当您想为高度嵌套的组件提供 Router props时， 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);
如果使用来自 react-redux 的连接，则将 withRouter 包裹在该连接周围。例如：export default withRouter(connect(mapStateToProps)(App))。这里的解决方案stackoverflow.com/a/45082976/3714697
2021-05-25 06:40:15
你在哪里调整它，我有同样的问题，你能发布一个完整的解决方案吗？
2021-06-05 06:40:15
Nvm，我browserhistory在错误的位置。调整固定它。
2021-06-08 06:40:15
仍然没有运气:(
2021-06-13 06:40:15

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

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

就我而言，我在 URL 字符串的末尾有一个空格：

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

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

删除空间修复它：

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

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

谢谢！很容易被忽视
2021-05-28 06:40:15

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

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

其它你可能感兴趣的问题
上一篇React Hooks 错误：只能在函数组件内部调用 Hooks 下一篇在 fetch post 调用后重定向