React-Router 路由渲染不出来页面

近期项目用到了react-router的路由功能,但是页面上什么也不显示,控制台也不报错,请教一下是什么原因,下面是主要的代码:

import React,{Component} from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, hashHistory,Link } from 'react-router';
import Login from './js/Login'
import Register from './js/Register'
import './css/app.css'


class App extends Component{
    render() {
        return (
            <div>
                <h1>App</h1>
                <ul>
                    <li><Link to="/About">About</Link></li>
                    <li><Link to="/Inbox">Inbox</Link></li>
                </ul>
                {this.props.children}
            </div>
        )
    }
}

class About extends Component{
    render() {
        return <h3>About</h3>
    }
}

class Inbox extends Component{
    render() {
        return (
            <div>
                <h2>Inbox</h2>
                {this.props.children || "Welcome to your Inbox"}
            </div>
        )
    }
}

class Message extends Component{
    render() {
        return <h3>Message {this.props.params.id}</h3>
    }
}

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={App}>
            <Route path="about" component={About} />
            <Route path="inbox" component={Inbox}>
                <Route path="messages/:id" component={Message} />
            </Route>
        </Route>
    </Router>, document.getElementById('root')
)

小白参考React-router的中文文档,可是还是没渲染出来,求大神指教~

阅读 9k
2 个回答

看一下你使用的react-router版本,不出意外应该是4。
参考文档

推荐问题
宣传栏