React Link不更新视图

Question

我遇到了路由器的问题。基本上，如果我通过网址直接导航到路由，在我的情况下：

http://localhost:3000/about

我确实将about组件加载到视图中。

但是，如果我点击主页上的“约”链接，则URL会发生变化，但视图不会发生变化。 about组件没有加载。

＆＃13;

＆＃13;

//App.js
import React, {Component} from 'react';
import {
  BrowserRouter as Router,
  Route,
  Link as RouterLink,
} from 'react-router-dom'
import Nav from  './Nav';
import About from './About';

class App extends Component {
  render() {
    return (
      <Router>
        <Nav />
        <hr />
        <Route exact path="/" component={this.Home} />
        <Route path="/about" component={About}/>
      </Router>
    );
  }

  Home = () => (
    <div>Home</div>
  )
}

export default App;

//Nav.js
import React, {Component} from 'react';
import {
  Link as RouterLink
} from 'react-router-dom'


export default class Nav extends Component {
  render() {
    return (
      <div><RouterLink to="/">Home</RouterLink>
      <RouterLink to="/about">About</RouterLink></div>
    );
  }
}

//About.js
import React, {Component} from 'react';

export default class About extends Component {
  render() {
    return (
     <div>About</div>
    );
  }
}

＆＃13;

＆＃13;

＆＃13;