Javascript react路由器模式路由与服务器端渲染

嘿，伙计们，我有一个客户端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;

//routes.js
从“React”导入React；
从“@jaredpalmer/after”导入{asyncComponent}”；
从“./components/helpers/Load”导入加载；
导出默认值[
{
名称：“主要”，
路径：“/”，
确切地说：是的，
组件：异步组件({
加载器：（）=>
导入（/*webpackChunkName:“主页”*/“./components/views/main/main”），
占位符：（）=>
})
},
{
名称：“地图页”，
路径：“/details”，
组件：异步组件({
加载器：（）=>
进口(
/*webpackChunkName:“详细信息”*/“./components/views/map/MapPage”
),
占位符：（）=>
})
},
{
名称：“未找到”，
确切地说：是的，
组件：异步组件({
加载器：（）=>
进口(
/*WebPackageChunkName:“未找到”*/“./components/views/NoMatch”
),
占位符：（）=>
})
}
];
//MapPage.js
类MapPage扩展组件{
render（）{
返回(
{/* + */}
{}
);
}
}
类ModalSwitch扩展组件{
previousLocation=this.props.location；
组件更新（下一步）{
设{location}=this.props；
如果(
nextProps.history.action！=“弹出”&&
（！location.state | |！location.state.modal）
) {
this.previousLocation=this.props.location；
}
}
render（）{
设{location}=this.props；
让isModal=(
位置、状态&&
位置、状态、模态&&
this.previousLocation！==位置
);
返回(
}
/>
}
/>
{isModal(
}
/>
)：null}
);
}
}
导出默认模式开关；

在MapPage.js中，我有一些路由可以使用，但它不提供服务器端的详细信息。 我需要为Details.js使用getInitialProps函数。 当我在routes.js中使用经典路由时，它才起作用。 如何解决该问题？

您是否阅读了本指南？我对SSR不太熟悉，但看起来您缺少了一个作为交换机父级的

StaticRouter

组件。谢谢你的回答博尔：）我两天前解决了这个问题，请阅读我对另一个问题的回答，我认为这是处理这个问题的好方法；）你读过这本指南了吗？我对SSR不太熟悉，但看起来您缺少了一个作为交换机父级的

StaticRouter

组件。谢谢你的回答博尔：）我两天前解决了这个问题，请阅读我对另一个问题的回答，我认为这是处理这个问题的好方法；）