反应路由器未加载页面

Question

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

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

我正在尝试重写代码以使用 React Router 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}/>