我尝试过的事情：

Question

我正在使用此路由器：

import {BrowserRouter as Router, Route, Switch } from "react-router-dom";

<Router basename={process.env.REACT_APP_ROUTER_BASE || '/MyApp'}>
    <Switch>
        <Route path="/" exact component={HomePage} />
        <Route path="/login" component={Login} />
        {/*<Redirect path="*" to="/" />*/}
    </Switch>
</Router>

使用开发人员模式（npm启动）时，它可以正常工作并重定向。

在生产模式下工作时（npm build->在要部署到tomcat的战争中将build的输出复制到WebContent文件夹），它的行为有所不同：

http://host:port/MyApp工作正常，使用该应用程序进行路由也很好
路由，例如 http://host:port/MyApp/login给出提示：找不到页面。

（注意：在开发人员模式下手动键入路由可以正常工作）

为什么不同？该如何解决？

我尝试过的事情：

参考：React routing not working while manually changing URL | React-router 4

将devServer条目（带有historyApiFallback：true）添加到我的webpack.config.prod.json：

export default {
resolve: {
    extensions: ['*', '.js', '.jsx', '.json'],
    // To support react-hot-loader
    alias: {
        'react-dom': '@hot-loader/react-dom'
    }
},
devtool: 'source-map', // more info:https://webpack.js.org/guides/production/#source-mapping and https://webpack.js.org/configuration/devtool/,
devServer: {
    historyApiFallback: true,
},

Answer 1

如果请求的文件不存在，historyApiFallback: true会呈现index.html。您的生产网络服务器没有执行此操作，因此当它尝试加载/MyApp/login时，会发现没有名为/MyApp/login（或/MyApp/login/index.html的文件，具体取决于配置）并返回404。 / p>

由于React Router正在处理您的路由逻辑客户端，因此您需要将您的网络服务器设置为在找不到页面时退回index.html。

在生产模式下使用路由器的basename属性时，路由无效

我尝试过的事情：

1 个答案: