React-router-dom link page not working correctly

Question

I am using react-router-dom library for work with routers, but when I want to link to another page it dosen't change the page and added new page right after previous change like bellow image. How can I fix this? 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 page:

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

Answer 1

You need to make use of <Switch> and put path="/" on the last

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