React-router-dom link 页面无法正常工作

Question

我正在使用 react-router-dom 库来处理路由器，但是当我想 link 到另一个页面时，它不会更改页面并在上一个页面之后添加新页面改变如下图。我怎样才能解决这个问题？ 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'));

Link 页数：

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

Answer 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>

React-router-dom link 页面无法正常工作

React-router-dom link page not working correctly

javascript

reactjs

react-router-dom