React Redirect if this.props.location.state is null

Question

I set a Component state with data from this.props.location.state. How can I redirect if it's null.

My Application has 2 routes:

<BrowserRouter>
    <Switch>
       <Route path="/comp2" component={Comp2} />
       <Route path="/" exact component={Comp1} />
    </Switch>
</BrowserRouter>

From Comp1 I can go to Comp2.

<Link to={{ pathname: "/comp2", state: {values} }}>{values.description}</Link>

Then, I set my state in the Comp2 with this data:

constructor(props) {
    super(props);
    this.state = {
        data: this.props.location.state.values
    };
}

It's working. However, if in the browser, I go straight to http://localhost:3000/comp2, it fails. How can I redirect back to http://localhost:3000 if the this.props.location.state.values is null?

Thanks

why does it fail ? maybe adding a default value if your states value don't exist like ```data: this.props.location.state.values || [] ``` — VersifiXion, Dec 03 '20 at 22:43
Might be a duplicate question. Check this https://stackoverflow.com/questions/48497510/simple-conditional-routing-in-reactjs — jtabuloc, Dec 03 '20 at 22:45
@MarcCharpentier I did what you did and it still returning ```Cannot read property 'values' of undefined``` in the constructor — myTest532 myTest532, Dec 03 '20 at 22:50
I also, would like to go back to the home page if it's undefined — myTest532 myTest532, Dec 03 '20 at 22:52

Madhuri · Answer 1 · 2020-12-03T23:10:16.420

0

Try this :

const data = this.props.location.state ? history.location.state.values : ''

in return (

<>
{data ? 
       <div> //ur comp2 component dom </div>
       : 
       <Redirect to="/homePage" />
}
</>
)

edited Dec 03 '20 at 23:10

answered Dec 03 '20 at 22:58

Madhuri

239
1
7

Sorry, I did not understand it. Where should I add this return? – myTest532 myTest532 Dec 03 '20 at 23:03
comp2 component – Madhuri Dec 03 '20 at 23:09
What's Redirect? From where it's coming from? – myTest532 myTest532 Dec 03 '20 at 23:16
ask a new question on stackoverflow for this,, instead of asking questions go through react official documentation and then start coding – Madhuri Dec 03 '20 at 23:19

React Redirect if this.props.location.state is null

1 Answers1