I am using the next
version of React Router, and it seems to be dropping params. I expect the redirect below to retain the value of channelId
, but the to
route uses the literal string ":channelId
" in the path instead.
<Switch> <Route exact path="/" component={Landing} /> <Route path="/channels/:channelId/modes/:modeId" component={Window} /> <Redirect from="/channels/:channelId" to="/channels/:channelId/modes/window" /> </Switch>
This looks like a resolved issue, but it's not working. Is there something else I need to pass to the to
route?
Redirect and Navigate Component With the release of React Router v6, the Redirect component was removed and replaced with the Navigate component, which operates just as the Redirect component does by taking in the to prop to enable you redirect to the page you specify.
To pass props to the Redirect component with React Router, we put it in the object we set as the value of the to prop. <Redirect to={{ pathname: "/order", state: { id: "123" }, }} />; to set the to prop to an object with the state property set to an object with the props.
Step 1: To start with, create a React application using the following command: npx create-react-app <project_name>; Step 2: Install the latest version of react-router-dom in the React application by the following. Project Structure: Create a folder named components in the src folder and add files Home.
Here's what I've been using, similar to the other answer but without a dependency:
<Route exact path="/:id" render={props => ( <Redirect to={`foo/${props.match.params.id}/bar`} />; )} />
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