Rediriger avec le routeur de réaction dans une application de réaction rouge

Question

J'essaye d'implémenter le routage pour mon application qui est construite avec réagissent et redux. Je l'ai enveloppé afin que les gestionnaires d'itinéraires puissent accéder au magasin. Mais ma logique de routage ne fonctionne pas.

Ce morceau de code fonctionnait très bien

export default class Root extends Component { 
 
    render() { 
 
    return (
 
     <Provider store={this.props.store}> 
 
     <div> 
 
      <App /> 
 
     </div> 
 
     </Provider> 
 
    ); 
 
    } 
 
}

Mais quand je remplacerai avec le code ci-dessous, il ne showhing rien sur mon localhost.

export default class Root extends Component { 
 
    render() { 
 
    return (
 
     <Provider store={this.props.store}> 
 
     <div> 
 
     <Router> 
 
     <Route path="/" component={App} /> 
 

 
     </Router> 
 
     </div> 
 
     </Provider> 
 
    ); 
 
    } 
 
}

J'essaie de comprendre ce que je fais mal. Toute aide serait appréciée.

Answer 1

Je suppose que votre projet est un projet basé sur un navigateur. Ainsi, vous pouvez utiliser <BrowserRouter> si votre site Web/application est hébergé sur un serveur dynamique. Vous pouvez envelopper comme:

import {BrowserRouter, Route} from 'react-router-dom'; 

    export default class Root extends Component { 
     render() { 
     return (
      <Provider store={this.props.store}> 
      <div> 
      <BrowserRouter> 
      <Route path="/" component={App} />  
      <BrowserRouter> 
      </div> 
      </Provider> 
     ); 
     } 
    } 

si votre web est soutenu par une utilisation statique make serveur de <HashRouter>

Vous pouvez en lire plus Here

Answer 2

Je pense que vous êtes censé utiliser l'un des composants de routeur de niveau supérieur comme BrowserRouter. Voir si cela fonctionne:

return (
    <Provider store={this.props.store}> 
    <div> 
     <BrowserRouter> 
     <Route path="/" component={App} /> 
     </BrowserRouter> 
    </div> 
    </Provider> 
);