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

Question

我的 React 应用程序在使用应用程序导航菜单或键入 [=34] 等一级路由时按预期工作，例如 /、/foo 和 /bar =]直接进入浏览器地址栏。

然而，更深的 url 等 /foo/bar 仅在使用应用程序导航菜单时有效，但在 url 直接输入浏览器地址栏时无效。

对于 depper URL，当刷新页面或直接在地址栏中键入 url 时，会显示站点 index.html（白屏，因为没有加载任何内容或样式），但它似乎没有被 React 渲染，因为控制台中没有错误，并且 React 开发工具显示空白屏幕。

我正在使用 react-router 4.0.0 和设置了 --history-api-fallback 选项的 webpack-dev-server。我已经尝试将服务器切换为 express 并设置一个 catch all 以将所有路由重定向到 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，我用它来将生成的 js 文件的 <script> 标记注入到应用程序的主体中。脚本标签 src 是作为亲戚 url src="main.js" 生成的，因此在深度 urls 上刷新页面会导致找不到 javascript 文件，因此反应应用程序未加载。

快速查看 html-webpack-plugin 代码表明 javascript 文件的 url 是从我没有设置的 webpack 配置变量 output.publicPath 生成的我的应用程序。将以下代码添加到我的 webpack.config.js 解决了这个问题。

output: {
    publicPath: '/'
},

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

react-router not returning content for nested routes on page load

reactjs

react-router

webpack-dev-server

应用入口点（index.js）

AppContainer 组件