React hookrouter多个布局

Question

我想使用钩子路由器在React中使用多个布局。

在正常的react-router-dom中，我使用路由内的路由来实现多布局效果。

这是我现有的react-router-dom代码，我想把它转换成hookrouter：

export default () =>
        <Switch>
            <Route exact path={[ Doctor_Login, Doctor_Panel , Reception_Login ,  Reception_Panel , Pharmacy_Login , "/"]}>
                <NavBar >
                    <Switch>
                        <Route exact path="/" component={MainView}/>

                        <Route exact path={Doctor_Login}
                              render={(props) => <Login {...props} Type={"Doctor"} />}/>

                        <Route exact path={Doctor_Panel} component={DoctorPanel}/>

                        <Route exact path={Reception_Login}
                              render={(props) => <Login {...props} Type={"Reception"} />}/>

                        <Route exact path={Reception_Panel} component={ReceptionPanel}/>

                        <Route exact path={Pharmacy_Login}
                              render={(props) => <Login {...props} Type={"Pharmacy"} />}/>
                    </Switch>
                </NavBar>
            </Route>
            <Route exact path={["/Test", Pharmacy_Panel , Pharmacy_Sell]}>
                <NavBarDrawer>
                    <Switch>
                        <Route exact path="/Test" component={Tests}/>
                        <Route exact path={Pharmacy_Panel} component={PharmacyPanel}/>
                        <Route exact path={Pharmacy_Sell} component={SellPanel}/>
                    </Switch>
                </NavBarDrawer>
            </Route>
        </Switch>

hookrouter中需要的代码

const routes = {
<Layout1>
    '/comp1': () => <Comp1 />,
</Layout1>

<layout2>
    '/comp2': () => <Comp2 />,
</layout2>
};

Answer 1

我认为您可以基于docs：https://github.com/Paratron/hookrouter/blob/master/src-docs/pages/en/02_routing.md#nested-routing中的嵌套路由部分来做到这一点

简而言之，您可以基于父级拥有不同的布局：

"app*": ()=> <AppLayout/>,
"pages*": ()=> <PagesLayout/>

其中每个布局组件都有自己的路线