更新浏览器时，React-Router呈现组件

Question

我正在使用react-router和react-md。我的问题是，当我通过链接更改url时，组件不会呈现。如果我按F5的作品。我的代码是这样的：

版本

    "react-router": "^5.0.0",
    "react-router-dom": "^5.0.0"

App.js

import React, { Component } from 'react';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
      sidebarVisible: false
    };
  }

  render() {
    const { sidebarVisible } = this.state;

    return (
      <div>
        <Header showDrawer={this.showDrawer} />
        <Sidebar handleVisibility={this.handleVisibility} closeDrawer={this.closeDrawer} sidebarVisible={sidebarVisible} />
        <Content />
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';

WebFontLoader.load({
    google: {
      families: ['Roboto:300,400,500,700', 'Material Icons'],
    },
  });

render(
    <Router>
        <App />
    </Router>
    , document.getElementById('root'));
serviceWorker.unregister();

content.js

import React, { Component } from 'react'
import PropTypes from 'prop-types';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";



class Content extends Component {

    render() {
        const { title } = this.props;
        return (
            <Router>
                <div>
                    <Route exact path="/client" component={Client} />
                    <Route path="/payment" component={Payment} />
                    <Route path="/invoice" component={Invoice} />
                </div>
            </Router>
        );
    }
}

export default Content

NavItemLink.js

import React from 'react';
import { Link, Route } from 'react-router-dom';

const NavItemLink = ({ label, to, icon, exact }) => (
  <Route path={to} exact={exact}>
    {({ match }) => {
      let leftIcon;
      if (icon) {
        leftIcon = <FontIcon>{icon}</FontIcon>;
      }

      return (
        <ListItem
          component={Link}
          active={!!match}
          to={to}
          primaryText={label}
          leftIcon={leftIcon}
        />
      );
    }}
  </Route>
);
export default NavItemLink;

我认为在content.js中，react-router必须检测到更改并呈现组件。

非常感谢。