React 路由器 dom 在主应用程序中不起作用

Question

早上好，

我在使用我自己的 webpack 配置处理 React 路由器 dom 时遇到问题。我知道使用 create-react-app 可以解决（几乎）任何问题并且使用起来很友好，但我们希望有更多的灵活性。

这是我的主要应用程序：

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
import Login from '../pages/Login'
import { AppContextProvider } from '../context/AppContext'

const MainApp = () => {
    return (
        <AppContextProvider>
            <Router basename={'nynweb'}>
                <Switch>
                    <Route exact path='/' component={Login} />
                    <Route exact path='/login' component={Login} />
                </Switch>
            </Router>
        </AppContextProvider>
    )
}


export default MainApp

如您所见，它非常简单。如果我在浏览器中使用 localhost:3000/nynweb，它会完美运行，并且路由器会重定向到登录页面。然后，如果我输入 localhost:3000/nynweb/login，它应该做的完全一样（在我理解的列表中），但它没有。我有无法 GET /nynweb/login 响应。

不过，路由在内部正常工作。我的意思是，当我在组件中使用 useHistory 推送方法时，它会正确重定向（history.push('/login')）。

我错过了什么？下面我发布我的 webpack 配置。也许问题出在那儿：

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const BabelRules = {
    test: /\.(js)$/,
    use: ['babel-loader'],
    exclude: /node_modules/,
}

const CSSRules = {
    test: /\.css$/i,
    use: ['style-loader', 'css-loader'],
}

const ImageRules = {
    test: /\.(woff(2)?|ttf|otf|eot|svg)(\?v=\d+\.\d+\.\d+)?$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'static/fonts/',
            },
        },
    ],
}

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js',
        publicPath: '/nynweb/',
        clean: true,
    },
    optimization: {
        minimize: true,
    },
    devServer: {
        port: 3000,
        historyApiFallback: true,
    },
    module: {
        rules: [BabelRules, CSSRules, ImageRules],
    },
    resolve: {
        extensions: ['.js'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html',
        }),
    ],
}

下面我已经包含了一个带有应用程序树的屏幕截图，以便您可以看到静态文件夹的位置（所有资产都在那里）

Answer 1

作为documentation of Webpack states，publicPath 选项允许提供资产，例如图像、SVG 等。Webpack 可能会搜索名称为“登录”的资产，但是找不到。

我建议您将此字符串更改为您存储资产的公用文件夹（通常是 /public）。

另外，React-Router documentation 中的示例在basename 字符串之前添加了一个正斜杠。

澄清

您将 publicPath 变量设置为 /nynweb/，而 Webpack 理解的是'/nynweb/*' 路径下的所有内容都将作为资产提供。

将其更改为，比如/nynweb/public/，现在，“/nynweb/public/*”路径下的所有内容都将用作资产。

不是 '/nynweb/public/some_route' 的路由现在将按预期工作。