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

Question

我的 React 应用程序在使用应用程序时按预期工作，适用于第一级路由，例如 /、/foo 和 /bar导航菜单或直接在浏览器地址栏中输入网址时。

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

对于 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我用来注入(inject) <script>将生成的 js 文件的标记添加到应用程序的正文中。脚本标签 src 被生成为相对 url src="main.js" ，因此刷新深层 url 上的页面会导致找不到 javascript 文件，从而导致 React 应用程序无法加载。

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

output: {
    publicPath: '/'
},