react router modal route with server side rendering

Question

Hey Guys I have a client side react app and I want to change it to a server side react app. I have a modal route inside that application but I don't know how I can use classic syntax for create a modal route; here is my code:

//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;

in MapPage.js I have some routes that it works but it don't render server side details . I need to use getInitialProps function for Details.js . it works just when i use a classic route in routes.js . How I can resolve that issue ?