无法 link 显示新页面

Question

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

我发现了几个看起来相似的 Whosebug 问题 (, , )，但我还没有找到解决方案——似乎有些人已经让它工作了，但他们没有post 完整的代码，我没能猜对他们做了什么。有几个地方似乎表明 <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;

About.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;

如果我单击 link，URL 栏显示它正在调出 localhost:3000/about。但是页面没有变化。如果我刷新浏览器，它会在自己的页面上重新显示 "About"，这是我希望它在单击 link 时执行的操作。那是我最接近的一次，但是我如何让它在不需要刷新的情况下做正确的事情呢？还是我做的其他事情完全错了？

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

Answer 1

将第二个 <Router> 组件放入 App.js。这导致了问题。

A that uses the HTML5 history API (pushState, replaceState and the popstate event) to keep your UI in sync with the URL.

Source

Working Sandbox

无法 link 显示新页面

Can't get link to display a new page

reactjs

react-router-v4