Мне нужны маршруты, вложенные в маршрут '/'.
Вот мой код:
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>
);