react-router在页面加载时不返回嵌套路由的内容

Question

我的反应应用的工作原理如预期的第一级路线，例如/，/foo和/bar，双方使用的应用程序导航菜单或直接键入网址时，系统到浏览器地址栏的时候。

但是，更深的网址（例如，/foo/bar仅在使用应用程序导航菜单时有效，而在直接将网址输入到浏览器地址栏中时则无效）。

对于depper URL，在刷新页面或直接在地址栏中输入url时，将显示站点index.html（白屏，因为未加载任何内容或样式），但由于没有错误，因此它似乎没有通过响应呈现出现在控制台中，而react dev工具显示黑屏。

我正在使用带有--history-api-fallback选项集的react-router 4.0.0和webpack-dev-server 。我尝试过切换服务器以表示并设置一个catch全部以将所有路由重定向到index.html，以及降级到react-router 3.0.2，但是问题在两个实例中仍然存在。

我将代码缩减到路由器和一些我要路由的裸机的最小数量。

应用程序入口点（index.js）

import React from 'react';
import { render } from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

// import components
import AppContainer from './components/AppContainer';

render(
    <LocaleProvider>
        <BrowserRouter>
            <AppContainer/>
        </BrowserRouter>
    </LocaleProvider>, 
    document.querySelector('#main')
);

AppContainer组件

import React from 'react';
import { Route, Switch, Link } from 'react-router-dom';

// import components
import Home from './Home';
import About from './About';
import Test from './Test';
import NotFound from './NotFound';

class AppContainer extends React.Component {
    render() {
        return (
            <div>
                <ul>
                    <li><Link to="/">Home</Link></li>
                    <li><Link to="/about">About</Link></li>
                    <li><Link to="/asdasdhuahfisd">404 Test</Link></li>
                    <li><Link to="/about/test">About/Test</Link></li>
                </ul>

                <Switch>
                    <Route path="/" exact component={Home} />
                    <Route path="/about/test" component={Test} />
                    <Route path="/about" component={About} />
                    <Route component={NotFound} />
                </Switch>
            </div>
        );
    }
}

export default AppContainer;

Answer 1

我设法将问题缩小到html-webpack-plugin我<script>用来将生成的js文件的标签注入到应用程序主体中的问题。脚本标签src是作为相对url生成的src="main.js"，因此刷新深url上的页面会导致找不到javascript文件，因此React应用未加载。

快速查看html-webpack-plugin代码即可发现javascript文件的网址是由output.publicPath我未在应用程序中设置的webpack配置变量生成的。将以下代码添加到我的webpack.config.js修复问题。

output: {
    publicPath: '/'
},