React-Router-Dom Link-Seite funktioniert nicht richtig

Question

Ich benutze react-router-dom-Bibliothek für die Arbeit mit Routern, aber wenn ich auf eine andere Seite verlinken möchte, ändert er nicht die Seite und fügte neue Seite direkt nach dem vorherigen ändern Sie wie Balg Bild. Wie kann ich das beheben? 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-Seite:

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

Answer 1

Sie müssen den Einsatz von <Switch> und path="/" auf den letzten

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