react路由页面无法显示

Question

我的问题

新手学react遇到个问题：点击<link>按钮后路由的页面无法显示。

我的页面

仿一个微信公众平台的页面，首页是登录，从登陆输入一个用户名进去后进入主页面，在主页面中点击按钮进行页面部分区域的路由(就是点击开发管理那个按钮)，但是点击后整个页面白屏什么也没显示，也没报错。

代码

完整代码在这里：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 这部分负责点击后跳转路由

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>首页</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_dev">
                        <Link to="/layout/dev">
                            <span>开发管理</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_id">
                        <Link to="/layout/id">
                            <span>用户身份</span>
                        </Link>
                    </dt>

                    <dt class="menu_title menu_data">
                        <Link to="/layout/data">
                            <span>数据分析</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>运维中心</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>设置</span>
                        </Link>
                    </dt>
                </dl>    
            </div>
        );
    }
}
export default SideNav;

Answer 1

首先,你GitHub代码,我跑不起来.

其次,大概看了一下你代码

src/component/layout/index.jsx 你确定你引用文件目录没问题?

上图代码是从你提供的GitHub地址上Clone下来的