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

我已经设置了 Reactreact-router版本 4。当我直接在浏览器上输入 URL 时，路由会起作用，但是当我单击链接时，浏览器上的 URL 会发生变化（例如http://localhost:8080/类别 http://localhost:8080/categories），但内容不会更新（但如果我刷新，它就会更新）。

以下是我的设置：

The 路由.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>

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

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