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

问题描述

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

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

解决方法

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

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
  }