React-router-dom 链接页面无法正常工作答案

【问题标题】：React-router-dom link page not working correctlyReact-router-dom 链接页面无法正常工作
【发布时间】：2017-10-27 21:18:16
【问题描述】：

我正在使用 react-router-dom 库来处理路由器，但是当我想链接到另一个页面时，它不会更改页面并在之前的更改之后立即添加新页面，如下图所示。我怎样才能解决这个问题？ mentioned image

Main.js：

const routes = (
<HashRouter>
  <div>
    <Route path="/" component={App} />
    <Route path="/about" component={About} />
  </div>
</HashRouter>
);

ReactDom.render(routes , document.getElementById('app'));

链接页面：

<Menu.Item key="morepage:about"><Link to="/about">About Page</Link></Menu.Item>

【问题讨论】：

标签： javascript reactjs react-router-dom

【解决方案1】：

你需要使用<Switch>并将path="/"放在最后

import {HashRouter, Route, Switch} from 'react-router-dom';
<HashRouter>
    <div>
        <Switch>
                <Route path="/about" component={About} />
                <Route path="/" component={App} />
        </Switch>
    </div>
</HashRouter>

【讨论】：

谢谢它的工作。也不需要在 Switch 标签内添加第二个 div 标签。
我有一个问题：为什么我必须把 path="/" 放在最后？这样做有证书原因吗？
我们需要放置 path="/" 以避免与其他路径产生歧义