response-router-dom - маршруты, вложенные в маршрут "/" - PullRequest
0 голосов
/ 23 мая 2019

Мне нужны маршруты, вложенные в маршрут '/'. Вот мой код:

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>
);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...