Javascript 反应路由器dom链接页工作不正常

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

Main.js：

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

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

const路由=(
);
render（routes、document.getElementById（'app'）；

链接页：

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

关于页面

您需要使用

并将

path=“/”

放在最后一个位置

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

从'react router dom'导入{HashRouter，Route，Switch}；

谢谢，它很管用。也不需要在Switch标签中添加第二个div标签。我有一个问题：为什么我必须在最后添加path=“/”？是否有确凿的原因？我们需要放置path=“/”以避免与其他路径产生歧义