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

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

包装您的组件withRouter应该为您完成工作.withRouter使用Link或任何其他Router道具的组件需要,并且不Router props直接接收Route或来自Parent Component

当调用它时,路由器Props可用于组件

<Route component={App}/>

要么

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

或者,如果您将Links路由器标记的直接子项放置为

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

如果您希望将路由器中的子内容写为组件,例如

<Router>
     <App/>
</Router>

路由器道具将无法用于App,因此,您可以使用类似路由来传递它

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

但是当你想要将路径道具提供给高度嵌套的组件时,withRouter会出现在Handy中.检查此解决方案

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 3

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