React routeur ne fonctionne pas correctement

Question

J'ai mis à jour de react Router v2 à v4 et puis tout a été brisé! J'ai cherché sur google avec des erreurs et appris une chose qui est la dernière version du routeur de réaction est totalement réécrit. J'ai essayé de suivre les docs pour mettre à jour mon application. Cependant, j'ai copié les codes des documents officiels et cela fonctionne parfaitement. Mais quand je travaille avec mes composants et ma structure, ce n'est pas le routage. Je ne pouvais pas comprendre le problème réel. tout semble correct mais ce n'est pas le routage.

Mise à jour

j'ai fait comprendre le problème. c'était avec le rendu du composant de Route. J'utilisais Component dans mon code mais ça devrait être component c'est pourquoi mon code ne fonctionnait pas. Il n'a pas eu l'événement jeter une erreur!

Ce code ci-dessous travaille pour le routage

import React from 'react'; 
import { render } from 'react-dom'; 

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

const About =() => (
    <div>About page</div> 
) 
const Home =() => (
<div>Home component</div> 
) 
const AppComponent =() => (
<div>App component is rendered as well</div> 
) 

render(
    <Router> 
    <div> 
     <ul> 
     <li><Link to="/">Home</Link></li> 
     <li><Link to="/about">About</Link></li> 
     <li><Link to="/contact">Contact</Link></li> 
     </ul> 

     <hr/> 

     <Route exact path="/" component={Home}/> 
     <Route exact path="/" component={AppComponent}/> 
     <Route path="/about" component={About}/> 
    </div> 
    </Router>, 
    document.querySelector('#app') 
) 

Ce code ne fonctionne pas pour les routes ci-dessous

import React from 'react'; 
import { render } from 'react-dom'; 

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

const SignUp =() => (
    <div>This is Sign up Page</div> 
) 
const Home =() => (
<div>Home component</div> 
) 
const AppComponent =() => (
<div>App component is rendered as well</div> 
) 

render(
    <Router> 
    <div className="container"> 
     <nav className="navbar navbar-default"> 
      <div className="container-fluid"> 
      <div className="navbar-header"> 
       <Link to="/" className="navbar-brand">Red Dice</Link> 
      </div> 

      <div className="collapse navbar-collapse"> 
       <ul className="nav navbar-nav navbar-right"> 
       <li><Link to="/signup">Sign up</Link></li> 
       </ul> 
      </div> 
      </div> 
     </nav> 

    <Route exact path="/" Component={Home} /> 
    <Route exact path="/" Component={AppComponent} /> 
    <Route path="/signup" Component={SignUp} /> 
    </div> 

</Router>, 
    document.querySelector('#app') 
) 

J'ai une autre question sur browserHistory. Dans une version plus ancienne, nous avions cela, mais dans une version plus récente, le routeur ne le fournit pas. Alors, que puis-je utiliser dans une version plus récente pour travailler avec browserHistory?

Answer 1

Dans la nouvelle version, vous devez utiliser BrowserRouter pour remplacer l'option browserHistory:

import { BrowserRouter } from 'react-router-dom' 

<BrowserRouter> 
    <div> ... </div> 
    <Route /> 
    <Route /> 
</BrowserRouter> 

Vous pouvez en savoir plus à ce sujet dans https://reacttraining.com/web/api/BrowserRouter