React Router ne pas charger la page

Question

Je suis un tutoriel React en ligne. Dans le tutoriel React Router 3 utilisé pendant que j'ai obtenu React Router 4 quand j'ai téléchargé React Router (et). Le code dans le tutoriel ressemble à ceci.

import React from "react"; 
import {render} from "react-dom"; 
import {Router, Route, browserHistory} from 'react-router' 

import {Root} from "./components/Root"; 
import {Home} from "./components/Home"; 
import {User} from "./components/User"; 

class App extends React.Component { 
    render() { 
     return (
      <Router> 
       <Route path={"user"} component={User}/> 
       <Route path={"home"} component={Home}/> 
      </Router> 
     ); 
    } 
} 

render(<App />, window.document.getElementById('app')); 

Je suis en train de réécrire le code pour travailler avec React Router 4 comme ceci:

import React from "react"; 
import {render} from "react-dom"; 
import {Switch, BrowserRouter, Route} from 'react-router-dom' 

import {Root} from "./components/Root"; 
import {Home} from "./components/Home"; 
import {User} from "./components/User"; 

class App extends React.Component { 
    render() { 
     return (
      <BrowserRouter> 
       <Switch> 
        <Route path={"user"} component={User}/> 
        <Route path={"home"} component={Home}/> 
       </Switch> 
      </BrowserRouter> 
     ); 
    } 
} 

render(<App />, window.document.getElementById('app')); 

Le code pour user.js ressemble à ceci:

import React from "react"; 

export class User extends React.Component { 
    render() { 
     return (
      <div> 
       <h3>The User Page</h3> 
       <p>User ID: </p> 
      </div> 
     ); 
    } 
} 

Quand je essayez localhost:8080/user il ne retourne rien.

Je ne reçois que

<div id="app"> 
    <!-- react-empty: 1 --> 
</div> 

Qu'est-ce que je besoin de changer dans mon code?

Answer 1

Essayez avec

<Route path="/user" component={User}/>