如何同时使用 multi-entry 和 history-mode 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/ last
  }

如何同时使用 multi-entry 和 history-mode react-router？

How to use multi-entry and history-mode react-router at the same time?

history

reactjs

webpack

react-router