How does react handle routing of login pages?

< H2 > question < / H2 >

novice, I want to do a react single-page application with a separate login page. I don"t know how to handle the routing of the login page.
I handled the login component according to the following code. I can log in and go to the login page, but when I cut to the route to the main page of localhost/-sharp/layout/id, it was a white screen, and the chrome debugger did not report an error, and webpack did not indicate an error.
is there something wrong with my solution? How to solve the problem of localhost/-sharp/layout/id white screen?

< H2 > my code < / H2 >

app.jsx

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

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

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

The

only for the first time after entering url

class Login extends React.Component{
    render(){
        return(
            <div class="loginpage">
                
            </div>
            );
    }
}
export default Login;

the layout.jsx page is my main page

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";

class Layout extends React.Component{
    constructor(props){
        super(props);
    };
    render(){
        return(
            <div id="layout">
                <TopNav />
                <SideNav />
                <Switch>
                    <Route exact path="/layout/home" 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;

webpack configuration

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
const webpack = require("webpack");
module.exports = {
    entry: "./src/app.jsx",
    output: {
        path: path.resolve(__dirname,"dist"),
        publicPath: "/dist/",
        filename: "js/app.js"
    },
    resolve:{
        alias:{
            page: path.resolve(__dirname,"src/page"),
            component: path.resolve(__dirname,"src/component")
        }
    },
    module: {
        rules: [
        // react
            {
                test: /\.jsx$/,
                exclude: /(node_modules)/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["env","react"]
                    }
                }
            },
            // css
            {
                test: /\.css$/,
                use: ExtractTextPlugin.extract({
                    fallback: "style-loader",
                    use: "css-loader"
                })
            },
            //
            {
                test:/\.(png|jpg|gif)$/,
                use: [
                    {
                        loader: "url-loader",
                        options: {
                            limit:8192,
                            name:"resouce/[name].[ext]"
                        }
                    }
                ]
            }
            
        ]
    },
    plugins: [
        // html
        new HtmlWebpackPlugin({
            template: "./src/index.html"
        }),
        // css
        new ExtractTextPlugin("css/[name].css"),
    ],
    devServer:{
        port: 8086,
        historyApiFallback:true
    }
};