我的問(wèn)題

新手學(xué)react遇到個(gè)問(wèn)題：點(diǎn)擊<link>按鈕后路由的頁(yè)面無(wú)法顯示。

我的頁(yè)面

仿一個(gè)微信公眾平臺(tái)的頁(yè)面，首頁(yè)是登錄，從登陸輸入一個(gè)用戶(hù)名進(jìn)去后進(jìn)入主頁(yè)面，在主頁(yè)面中點(diǎn)擊按鈕進(jìn)行頁(yè)面部分區(qū)域的路由(就是點(diǎn)擊開(kāi)發(fā)管理那個(gè)按鈕)，但是點(diǎn)擊后整個(gè)頁(yè)面白屏什么也沒(méi)顯示，也沒(méi)報(bào)錯(cuò)。

代碼

完整代碼在這里：https://github.com/RicardoCao...
app.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import {Route,Switch,Redirect,HashRouter} from 'react-router-dom';

import Login from 'page/login/index.jsx';
import Layout from 'component/layout/index.jsx';

import './index.css';

class App extends React.Component{
    render(){
        return(
            <HashRouter>
                <switch>
                    <Route exact path="/" component={Login} />
                    <Route exact path="/layout/home/:username" component={Layout} />
                </switch>
            </HashRouter>
        )
    }
}

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

layout.jsx

import React from "react";
import ReactDOM from 'react-dom';
import {Route,Switch,Redirect,HashRouter} from 'react-router-dom';
import TopNav from "component/nav-top/index.jsx";
import SideNav from "component/nav-side/index.jsx";
import Home from 'page/home/index.jsx';
import Id from 'page/id/index.jsx';
import Data from 'page/data/index.jsx';
import Dev from 'page/dev/index.jsx';

import "./theme.css"

class Layout extends React.Component{
    constructor(props){
        super(props);
    };
    render(){
        return(
            <div id="layout">
                <TopNav />
                <SideNav />
                <Switch>
                    <Route exact path="/layout/home/:username" component={Home} />
                    <Route exact path="/layout/id" component={Id} />
                    <Route exact path="/layout/dev" component={Dev} />
                    <Route exact path="/layout/data" component={Data} />
                    <Redirect from="/layout" to="/layout/home"/>
                </Switch>
            </div>    
        );
    }
}
export default Layout;

navside.jsx 這部分負(fù)責(zé)點(diǎn)擊后跳轉(zhuǎn)路由

import React from "react";
import {Link}    from 'react-router-dom';

class SideNav extends React.Component{
    constructor(props){
        super(props);
    };
    render(){
        return(
            <div class="leftside">
                <dl id="sidenav">
                    <dt class="menu_title menu_home">
                        <Link to="/layout/home">
                            <span>首頁(yè)</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_dev">
                        <Link to="/layout/dev">
                            <span>開(kāi)發(fā)管理</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_id">
                        <Link to="/layout/id">
                            <span>用戶(hù)身份</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_data">
                        <Link to="/layout/data">
                            <span>數(shù)據(jù)分析</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_notice">
                        <Link to="/Home">
                            <span>模板消息</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_server">
                        <Link to="/Home">
                            <span>客服消息</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_neibor">
                        <Link to="/Home">
                            <span>附近的小程序</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_center">
                        <Link to="/Home">
                            <span>運(yùn)維中心</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_ad">
                        <Link to="/Home">
                            <span>推廣</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_setting">
                        <Link to="/Home">
                            <span>設(shè)置</span>
                        </Link>
                    </dt>
                </dl>    
            </div>
        );
    }
}
export default SideNav;