无法获取链接以显示新页面

Question

我一直在尝试使用 React Router 设置一个带有链接的页面，当用户单击该链接时，它将显示一个新页面。我尝试了React Router documentation 中示例的简化版本，但是当用户单击链接时，它会在现有页面的底部显示附加页面，而不是显示新页面。

我发现了几个看起来相似的 StackOverflow 问题（this、this、this），但我还没有找到解决方案——似乎有些人已经让它工作了，但是他们没有发布完整的代码，我也无法正确猜测他们做了什么。几个地方似乎表明<Route> 必须在不同的文件中才能显示新页面。基于此，这是我的最新尝试：

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App.js';
import About from './About.js';
import { BrowserRouter as Router, Route, Link, Switch } from 'react-router-dom';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
    <Router>
      <Switch>
        <Route exact path="/about" component={About} />
        <Route exact path="/" component={App} />
      </Switch>
    </Router>, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: ...
serviceWorker.unregister();

App.js

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

import './App.css';

class App extends Component {
  render() {
  return (
    <Router>
      <div>
        <h1>This is the main page</h1>
        <ul>
          <li>
            <Link to="/about">About</Link>
          </li>
        </ul>
        <hr />
      </div>
    </Router>
  );
  }
}

export default App;

关于.js

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

import './App.css';

function About() {
  return (
    <div>
      <h2>About</h2>
    </div>
  );
}

export default About;

如果我单击该链接，URL 栏会显示它正在打开 localhost:3000/about。但是页面没有变化。如果我刷新浏览器，它会在自己的页面上重新显示“关于”，这就是我在单击链接时希望它执行的操作。这是我最接近的一次，但我如何让它做正确的事情而不需要刷新？还是我做错了什么？

react-router-dom 版本是 4.3.1。我正在使用 Chrome。

Answer 1

在 App.js 中删除第二个 <Router> 组件。这导致了问题。

使用 HTML5 历史 API（pushState、replaceState 和 popstate 事件）以使您的 UI 与 URL 保持同步。

Source

Working Sandbox