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

包装您的组件withRouter应该为您完成工作。withRouter使用Link或其他任何Router道具但不Router props直接从Route或从那里获得道具的组件需要Parent Component

路由器道具可在组件调用时使用

<Route component={App}/>

要么

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

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

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

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

<Router>
     <App/>
</Router>

Router道具对App不可用，因此，您可以使用类似

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