Question

我正在使用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>

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链接页面无法正常工作

1 个答案: