如何同时使用多入口和历史模式反应路由器？答案

【问题标题】：How to use multi-entry and history-mode react-router at the same time?如何同时使用多入口和历史模式反应路由器？
【发布时间】：2021-04-22 13:45:09
【问题描述】：

例如，我有两个页面localhost:8080/index.html 和localhost:8080/entry.html。当我像这样使用localhost:8080/entry.html/main 和localhost:8080/entry.html/person 和react-router 时

import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
<Router>
  <Switch>
    <Route exact path={'/main'} render={<Main />}>
    <Route exact path={'/person'} render={<Person />}>
  <Switch>
</Router>

它无法正常工作，并且当我刷新页面时我得到Cannot GET /subject.html/main。

我试试

import {BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom';
<Router basename="/subject.html">
  <Switch>
    <Route exact path={'/main'} render={<Main />}>
    <Route exact path={'/person'} render={<Person />}>
  <Switch>
</Router>

或

    devServer: {
        ....
        hot: true,
        historyApiFallback: true,
        publicPath: '/'
    },

它不工作。请告诉我如何做到这一点。谢谢~

【问题讨论】：

标签： reactjs webpack react-router history

【解决方案1】：

我自己意识到了。首先，在开发环境中，我们需要这样配置。

historyApiFallback: {
    verbose: true,
    rewrites: [
        {from: /^\/entry\/.*$/, to: '/entry.html'}, 
    ],
},

这意味着每当我们加载localhost:8080/entry/main时，它都会重定向到localhost:8080/entry.html/main。

除了部署环境，你还需要像这样写nginx。

  location / {
    rewrite ^/entry/(.+?) /entry.html/$1 last
  }

【讨论】：