How to send variable along with Redirect in Reactjs?

Question

I have the following in my react app:

<PrivateRoute 
  path="/profile" 
  component={ Profile }
  authenticated={ this.state.authenticated }

/>

<PrivateRoute/> is basically just the below:

const PrivateRoute = ({ component : Component , authenticated : auth , ...rest }) => {
  return (
    <Route {...rest} render={ (props) => {
      return (
        auth ? <Component {...props} /> 
        : <Redirect 
            to={{
                pathname : '/login',
                state : {
                    from : props.location
                }
            }} />
      )
    } } />
  )
}

As you can see in the above code there is a auth variable , how do i send this variable to now i would like to send this variable alog with the <Redirect /> which basically loads the <Login /> component , but how exactly do i send the auth variable alog with the Redirect component ?

Like you are sending location.

Sameer Reza Khan
– Sameer Reza Khan

2019-05-24 10:30:42 +00:00
Commented May 24, 2019 at 10:30 — Sameer Reza Khan
– Sameer Reza Khan, Commented May 24, 2019 at 10:30

Dhananjay C · Accepted Answer · 2019-05-24 10:33:34Z

2

You can pass props data with Redirect like this:

const PrivateRoute = ({ component : Component , authenticated : auth , ...rest }) => {
return (
<Route {...rest} render={ (props) => {
  return (
    auth ? <Component {...props} /> 
    : <Redirect 
        to={{
            pathname : '/login',
            state : {
                from : {auth : auth}
            }
        }} />
  )
} } />

) }

and this is how you can access it:

this.props.location.state.auth

answered May 24, 2019 at 10:33

Dhananjay C

5979 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Varun Over a year ago

I guess it should be state: { from: props.location, auth: auth }

Siddharth Pachori · Accepted Answer · 2019-05-24 22:03:16Z

0

Use this.props.history.push and access that variable by this.props.location

answered May 24, 2019 at 22:03

Siddharth Pachori

1698 bronze badges

Collectives™ on Stack Overflow

How to send variable along with Redirect in Reactjs?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related