reactjs - React Router 具有更深的路径

Question

我正在尝试获取一个运行 React Router 的示例。

我的示例有以下 3 条路线:

1. (在浏览器中工作)http://0.0.0.0:8081/one
2. (在浏览器中失败)http://0.0.0.0:8081/one/two
3. (在浏览器中失败)http://0.0.0.0:8081/one/two/three

所有路由都适用于 Link，但只有 1. 在浏览器中输入 URL 时才有效。当在浏览器中输入 2. 路由时，浏览器控制台响应以下错误:

GET http://0.0.0.0:8081/one/app.js net::ERR_ABORTED 404 (Not Found)

主应用程序类:

import * as React from 'react';
import { BrowserRouter, Switch, Route, Link } from 'react-router-dom';
import { One } from './One';
import { Two } from './Two';
import { Three } from './Three';

export class App2 extends React.Component<{}, {}> {
    public render() {
        return <BrowserRouter>
            <ul>
                <li>
                    <Link to='/one'>One</Link>
                </li>
                <li>
                    <Link to='/one/two'>Two</Link>
                </li>
                <li>
                    <Link to='/one/two/three'>Three</Link>
                </li>
            </ul>
            <Switch>
                <Route path='/one/two/three' component={Three} />
                <Route path='/one/two' component={Two} />
                <Route path='/one' component={One} />
            </Switch>
        </BrowserRouter>;
    }
}

名为 One 的类:

import * as React from 'react';

export class One extends React.Component<{}, {}> {
    public render() {
        return <div>One</div>;
    }
}

名为二的类:

import * as React from 'react';

export class Two extends React.Component<{}, {}> {
    public render() {
        return <div>Two</div>;
    }
}

名为三的类:

import * as React from 'react';

export class Three extends React.Component<{}, {}> {
    public render() {
        return <div>Three</div>;
    }
}

在开发模式下运行应用程序的命令:

"scripts": {
    "develop": "webpack-dev-server --mode development --open --port 8081 --host 0.0.0.0 --config webpack.dev.config.js"
}

Webpack 配置 webpack.dev.config.js:

const path = require('path');
const HtmlWebPackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const htmlPlugin = new HtmlWebPackPlugin({
    template: "./src/index.html",
    filename: "./index.html"
});

module.exports = {
    entry: "./src/index.tsx",
    output: {
        filename: "app.js",
        path: path.resolve(__dirname, "dist")
    },

    // Enable sourcemaps for debuggin webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts', and '.tsx' as resolvable exteensions.
        extensions: [".ts", ".tsx", ".js", ".json"]
    },

    module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" },

            {
                test: /\.css$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "typings-for-css-module-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[name]_[local]_[hash:base64]" }}
                ]
            },

            {
                test: /\.scss$/,
                exclude: /\.global.scss$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "typings-for-css-modules-loader", options: { modules: true, namedExport: true, camelCase: true, localIdentName: "[local]" }},
                    { loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
                    { loader: "sass-loader" }
                ]
            },

            {
                test: /\.scss$/,
                include: /\.global.scss$/,
                use: [
                    { loader: "style-loader" },
                    { loader: "css-loader" },
                    { loader: "postcss-loader", options: { plugins: function () { return [ require("autoprefixer") ]; }}},
                    { loader: "sass-loader" }
                ]
            }
        ]
    },

    devServer: {
        historyApiFallback: true,
        disableHostCheck: true
    },

    plugins: [
        new CleanWebpackPlugin({
            cleanAfterEveryBuildPatterns: ['dist']
        }),
        htmlPlugin
    ]
};

我使用以下版本:

• 节点 v13.7.0
• “@types/react”:“11年9月16日”，
• “@types/react-dom”:“16.9.4”，
• “@types/react-router-dom”:“5.1.2”，
• “ react ”:“16.11.0”，
• “react-dom”:“16.11.0”，
• “react-router-dom”:“5.1.2”，
• “ typescript ”:“3.7.4”，
• “webpack”:“4.41.2”，
• “webpack-cli”:“3.3.10”，
• “webpack-dev-server”:“3.9.0”

我尝试遵循示例 here .

为什么只有 1. 路线有效？为什么其他路线 2. 和 3. 不起作用？

编辑1:

尝试使用精确也不起作用。结果与上面相同:

import * as React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { One } from './One';
import { Two } from './Two';
import { Three } from './Three';

export class App2 extends React.Component<{}, {}> {
    public render() {
        return <BrowserRouter>
            <Switch>
                <Route exact path='/one' component={One} />
                <Route exact path='/one/two' component={Two} />
                <Route exact path='/one/two/three' component={Three} />
            </Switch>
        </BrowserRouter>;
    }
}

编辑2:

尝试更改顺序也不起作用。结果与上面相同:

import * as React from 'react';
import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { One } from './One';
import { Two } from './Two';
import { Three } from './Three';

export class App2 extends React.Component<{}, {}> {
    public render() {
        return <BrowserRouter>
            <Switch>
                <Route path='/one/two/three' component={Three} />
                <Route path='/one/two' component={Two} />
                <Route path='/one' component={One} />
            </Switch>
        </BrowserRouter>;
    }
}

Answer 1

简单地说:最具体的路线先走。只需颠倒您的订单即可。

与大多数路由器一样，每个路由器都会按顺序检查是否匹配。

编辑1:证据https://reacttraining.com/react-router/web/guides/primary-components

编辑2:您的404错误向我表明问题不是路由器而是服务器。您是否构建了服务器，或者 webpack-dev-server 是一个预制服务器，用于在您开发时提供服务？我想您会发现，如果您转到/one 并单击 a 到/one/two ，它实际上会起作用。

编辑 3: 你的 webpack 开发服务器配置需要一些东西。我没有这方面的经验，但这里有一个文档 webpack.js.org/configuration/output/#outputpublicpath 我认为应该有所帮助。

按照评论中的建议:最终的解决方案是将 publicPath: '/' 添加到 Webpack 配置中的 output 中。