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