Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

React Router Redirect drops param

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?

like image 480
Matt Norris Avatar asked Apr 13 '17 18:04

Matt Norris


People also ask

What can I use instead of redirect in react?

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.

How pass Props in redirect in react?

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.

How do you use useNavigate in react-router-dom?

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.


1 Answers

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`} />;   )} /> 
like image 91
Jason D Avatar answered Sep 28 '22 04:09

Jason D