反应路由器未加载页面

Question

我正在关注在线React教程。在我下载React Router（和react-router-dom）时获得了React Router 4时使用的教程React Router 3。本教程中的代码如下所示。

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')); 

我试图重写代码一起工作做出反应路由器4这样的：

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')); 

的user.js的代码看起来是这样的：

import React from "react"; 

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

当我尝试localhost:8080/user它什么都不返回。

我只得到

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

它是什么，我需要在我的代码改变？

Answer 1

与

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