时间戳

首页 > 解决方案 > React hookrouter 多种布局

reactjs - React hookrouter 多种布局

问题描述

我想使用 hookrouter 在 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>
};

标签： reactjslayoutreact-routerhookrouter

解决方案

我认为您可以根据文档中的嵌套路由部分执行此操作： https ://github.com/Paratron/hookrouter/blob/master/src-docs/pages/en/02_routing.md#nested-routing

简而言之，您可以根据父级有不同的布局：

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

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

推荐阅读