Menu
I'm trying to configure React Router so that when accessing http://url/manage/roomId it goes directly to http://url/manage/roomId/sessions (loading RoomSessions component). These are tabs components' routes and I want to load the first tab's content (which it does) by default with the proper URL (which it does not).
It works fine except for the redirection
<Route
path="manage/:roomId"
component={RoomsManagerManageRoom}
onEnter={requireAuth}
>
<IndexRoute component={RoomSessions} onEnter={requireAuth} />
<Route path="sessions" component={RoomSessions} onEnter={requireAuth} />
<Route path="meetings" component={RoomMeetings} onEnter={requireAuth} />
<Route path="files" component={RoomFiles} onEnter={requireAuth} />
<Route path="recordings" component={RoomRecordings} onEnter={requireAuth} />
<Route path="sections" component={RoomSections} onEnter={requireAuth} />
<Route path="hosts" component={RoomHosts} onEnter={requireAuth} />
</Route>
What am I missing?
739
import { Redirect } from "react-router-dom"; The easiest way to use this method is by maintaining a redirect property inside the state of the component. Whenever you want to redirect to another path, you can simply change the state to re-render the component, thus rendering the <Redirect> component.
Use the Navigate element to set a default route with redirect in React Router, e.g. <Route path="/" element={<Navigate to="/dashboard" />} /> . The Navigate element changes the current location when it is rendered.
You can use the function returned by the useNavigate hook in two ways. Pass the path you want to navigate as the first argument and an optional object as the second argument. Pass the delta in the history stack to which you want to navigate as the only argument.
Two ways to handle redirecting on a user event such as create, update and delete with React Router.
Replace the <IndexRoute /> line with
<IndexRedirect to="sessions" />
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
