与服务器端渲染反应路由器模态路由

Question

大家好，我有一个客户端React应用程序，我想将其更改为服务器端React应用程序。 我在该应用程序中有一条模态路由，但是我不知道如何使用经典语法创建模态路由； 这是我的代码：

//routes.js
import React from "react";

import { asyncComponent } from "@jaredpalmer/after";

import Load from "../components/helpers/Load";

export default [
  {
    name: "Main",
    path: "/",
    exact: true,
    component: asyncComponent({
      loader: () =>
        import(/* webpackChunkName: "Home" */ "../components/views/main/Main"),
      Placeholder: () => <Load />
    })
  },
  {
    name: "MapPage",
    path: "/details",
    component: asyncComponent({
      loader: () =>
        import(
          /* webpackChunkName: "Details" */ "../components/views/map/MapPage"
        ),
      Placeholder: () => <Load />
    })
  },
  {
    name: "NotFound",
    exact: true,
    component: asyncComponent({
      loader: () =>
        import(
          /* webpackChunkName: "NotFound" */ "../components/views/NoMatch"
        ),
      Placeholder: () => <Load />
    })
  }
];

//MapPage.js


class MapPage extends Component {
  render() {
    return (
      <>
        <Header wrapper={"container-fluid"} />
        <main className="hScreen">
          <div
            className="row no-gutters"
            style={{ direction: "ltr", height: "100vh" }}
          >
            <div className="col-12 col-md-6 col-lg-6 col-xl-8 mahMap">
              <Map position={{ lat: 36.300191, lng: 59.563351 }} zoom={zoom} />
            </div>
            <SmList />
            <aside
              className="col-12 col-md-6 col-lg-6 col-xl-4 marginTop68 backMapAside mahFloatRight d-none d-md-block"
              style={{ direction: "rtl" }}
            >
              <div className="positionRe">
                {/* <div className="addCatPlus">+</div> */}
                <Search />
                <Category />
                <div className="containerMapCats">{<List />}</div>
              </div>
            </aside>
          </div>
        </main>
      </>
    );
  }
}

class ModalSwitch extends Component {
  previousLocation = this.props.location;

  componentDidUpdate(nextProps) {
    let { location } = this.props;

    if (
      nextProps.history.action !== "POP" &&
      (!location.state || !location.state.modal)
    ) {
      this.previousLocation = this.props.location;
    }
  }
  render() {
    let { location } = this.props;
    let isModal = !!(
      location.state &&
      location.state.modal &&
      this.previousLocation !== location
    );
    return (
      <>
        <Switch location={isModal ? this.previousLocation : location}>
          <Route
            exact
            path="/details"
            render={props => <MapPage {...props} />}
          />
          <Route
            path="/details/:id/:title"
            render={props => <Details {...props} />}
          />
        </Switch>
        {isModal ? (
          <Route
            path="/details/:id/:title"
            render={props => <Modal {...props} />}
          />
        ) : null}
      </>
    );
  }
}

export default ModalSwitch;

在MapPage.js中，我有一些可行的路由，但没有呈现服务器端详细信息。 我需要对Details.js使用getInitialProps函数。 它仅在我在route.js中使用经典路由时才有效。 我该如何解决该问题？