< H2 > my question < / H2 >

Novice learning react has encountered a problem: the routing page cannot be displayed after clicking the < link > button.

< H2 > my page < / H2 >

imitate a page of Wechat"s public platform. The home page is login. Enter a user name from the login and enter the main page. Click the button in the main page to route some areas of the page (that is, click the development and management button). But after clicking on the whole page, the white screen did not show anything, and there was no error.

< H2 > Code < / H2 >

the complete code is here: 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 is responsible for hopping routing after clicking

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;