使用 webpack 的 react-Router 嵌套 rouths 刷新错误

Question

当我使用Link to="/Home/PageA" 时它运行良好，但是当我刷新页面或在浏览器中输入“/Home/PageA”时，捆绑包会出错。

WebPack 和 React-Router 有冲突？如何解决？

提前致谢。

这是我的照片解释

actPic errorPic

这是我的代码：

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory, Link } from 'react-router'

    const App = (props) => {
        console.log("App", props);
        const key = 'root';
        return (
            <div>
                {React.cloneElement(props.children || <div />, { key })}
            </div>
        );
    };


    const LoginPage = (props) => {
        console.log("Login", props);

        return (
            <div className="Image">
                <h1>this is LoginPage</h1>
            </div>
        );
    };

    const HomePage = (props) => {
        console.log("Home", props);
        return (
            <div className="Image">
                <li><Link to="/Home/PageA">Tab 1</Link></li>
                <h1>this is  Home page</h1>
                {React.cloneElement(props.children || <div />, { key: props.pathname })}
            </div>
        );
    };

    const PageA = (props) => {
        console.log("pageA", props);
        return (
            <div>
                <input type='button' value="back" onClick={props.router.goBack}></input>
                this is pageA;
            </div>
        );
    };



    ReactDOM.render((
        <Router history={browserHistory}>
            <Route path="/" component={App}>
                <Route path="Login" component={LoginPage}>
                </Route>[enter image description here][1]
                <Route path="Home" component={HomePage}>
                    <Route path="PageA" component={PageA}>
                    </Route>
                </Route>
            </Route>
        </Router>

    ), document.getElementById('container'));

这是我的 webPack.config

module.exports = {
    devtool: 'source-map', 
    entry: __dirname + "/app/app.js", 
    output: {
        path: __dirname + "/app", 
        filename: "bundle.js" 
    },
    module: { 
        loaders: [
            {
                test: /\.json$/,
                loader: "json"
            }, {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: 'babel', 
                query: {
                    presets: ['es2015', 'react']
                }
            }, {
                test: /\.css$/,
                loader: 'style!css' 
            }, {
                test: /\.(png|jpg)$/,
                loader: 'url?limit=25000'
            }
        ]
    },
    devServer: {
        port: "9023",
        contentBase: "./app", 
        colors: true, 
        historyApiFallback: true, 
        inline: true 
    }
}

Answer 1

它是关于在服务器端渲染的。您需要具有路由器对象的服务器端映射路径。查看WebpackDevServer

您默认使用 browserHistory，您可以在此处阅读更多如何正确配置它：

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#browserhistory

或者使用哈希历史，更容易搞定：

https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md#hashhistory