Question

我需要嵌套在“ /”路由中的路由。这是我的代码：

const menu: MenuModel = [
    {link: '/calendar', label: 'Calendar'},
    {link: '/clients', label: 'Clients'},
    {link: '/logout', label: 'Logout'}
];

return (
<BrowserRouter>
    <PrivateRoute exact path="/" render={() => (
        <Home menu={menu}>
            {/*Main Content Routing*/}
            <PrivateRoute path="/calendar" component={Calendar}/>
            <PrivateRoute path="/clients" component={Clients}/>
        </Home>
    )}/>
    {/*Auth*/}
    <Route path="/auth" component={Auth}/>
    <PrivateRoute path="/logout" component={Logout}/>
</BrowserRouter>
);

但是它不起作用。 / auth和/ logout路由有效，但是当我单击“日历”或“客户端”时，不显示“主页”组件，甚至不显示“日历”和“客户端”组件的内容。我尝试过使用match.patch prop，但是它也不起作用（按预期，路径类似于'// calendar'）。我在下面只找到了这样的示例，但所有示例都使用命名路由，而不是基本路由。

我是React的新手，之前使用Angular并没有多条嵌套的“ /”路由。

// <PrivateRoute />根据状态字段组成<Route />或<Redirect to="/auth" />。

类似的东西行得通，但是它具有难看的链接“ / home / something” ...

const menu: MenuModel = [
    {link: '/home/calendar', label: 'Calendar'},
    {link: '/home/clients', label: 'Clients'},
    {link: '/logout', label: 'Logout'}
];

return (
<BrowserRouter>
    <PrivateRoute exact path="/" renderElement={<Redirect to="/home"/>}/>
    <PrivateRoute path="/home" render={props => (
        <Home menu={menu}>
            {/*Main Content Routing*/}
            <PrivateRoute path={props.match.path + '/calendar'} component={Calendar}/>
            <PrivateRoute path={props.match.path + '/clients'} component={Clients}/>
        </Home>
    )}/>
    {/*Auth*/}
    <Route path="/auth" component={Auth}/>
    <PrivateRoute path="/logout" component={Logout}/>
</BrowserRouter>
);

react-router-dom-嵌套在“ /”路由中的路由

0 个答案: