Question

我使用react，react-router（v4），redux和webpack（-dev-server）来构建应用程序。 Devserver和eveything工作正常，包括HMR和historyApiFallback。表示当我输入http://localhost:8080/how时，我会index.html，bundle.js（我的应用），并且正在呈现正确的组件How。

我的基本路由如下：

//App.js 
<Router>
    <Wrapper>
        <Route path='/' component={MainNav} />
        <Route exact path='/' component={Splash} />
        <Route path='/how' component={How} />
        <Route path='/auth' component={Auth} />
        <Route path='/' component={Footer} />
    </Wrapper>

然而，在宣布儿童路线时，例如，在Auth：

<Wrapper orange>
    Login Page
    <Link to={loginUrl}>Login</Link>
    <Switch>
        <Route exact path='/auth/login' component={Login} />
        <Route path='/register' component={Register} />
    </Switch>
</Wrapper>

我在输入http://localhost:8080/auth/login时从react-router获得404。导航到应用内的http://localhost:8080/auth/login时，例如在链接点击上，正在呈现Login组件。

我知道StackOverflow上有很多类似的问题，但奇怪的是顶级路由正在呈现而没有问题，这只发生在嵌套路由上。此外，它可能不是webpack-dev-server（historyApiFallback或publicPath）的问题，因为我还可以将应用程序捆绑生产并与节点服务器一起提供，结果相同

此外，我没有看到basic example in the react-router docs的差异。

仅供参考，这是我的webpack配置：

module.exports = {
    context: resolve(__dirname, 'app'),
    entry: debug ? [
        'react-hot-loader/patch',
        './index.js',
    ] : './index.js',
    output: {
        filename: 'bundle.js',

        path: resolve(__dirname, 'public'),

        publicPath: '/',
        // necessary for HMR to know where to load the hot update chunks
    },

    // possibly change to inline-source-map or something else
    devtool: debug ? 'eval' : false,

    devServer: debug ? {
        hot: true,
        compress: true,
        port: 8080,
        contentBase: resolve(__dirname, 'public'),
        publicPath: '/',
        historyApiFallback: true,
    } : { },
    module: {
        loaders: [
            { test: /\.js$/,
                loaders: [
                    'babel-loader',
                ],
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                loaders: [
                    'style-loader',
                    'css-loader?modules',
                    'postcss-loader',
                ],
            },
        ],
    },

...
}

React-Router在子路由上返回404

0 个答案: