反應路由器未加載頁面

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}/>