问题

• 新手，我想做一个带单独登录页面的react单页应用，不知道如何处理登录页面的路由。
• 我按照下面的代码处理了登录组件，可以实现登录进去后进入login页面，但是当我切到 localhost/#/layout/id这些主页面的路由时是个白屏，而且chrome调试工具没有报错，webpack也没提示错误。
• 求解，是不是我的方案有问题？怎么解决localhost/#/layout/id白屏的问题？

我的代码

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')
);    

login.jsx 页面是我的登录页面，我希望只在输入url后的第一次显示

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

layout.jsx 页面是我的主页面

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配置

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