如何同时使用多入口和历史模式的react-router？

Question

例如，我有两个页面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: '/'
    },

而且它也不起作用。请告诉我怎么做。谢谢~

Answer 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
  }