I'm new to React and I'm trying to make a simple redirect for a new created account. I'm trying to make it so that when a user creates an account, they get redirected to a new "loggedInHome page" otherwise if someone goes to the logged-in URL, they get redirected to the regular home page. Here's what I have tried:
I have a basic route for when the user logs in which by default has set authorization to false:
<Route path="/loggedInHome" component={() => <LoggedInHome authorized={false} />}>
I have a Component that allows the user to create an account, when created, the user is redirected to the new loggedInHome page:
if (signedUpState === 'true') {
return (
<>
<Redirect to={{ pathname: "/loggedInHome", authorized: { authorized: true } }} />
</>
)
}
And then I have my loggedInHome component. This page is for when the user has created their account and is on their dashboard page. Only accessible if the user made an acccount.
function LoggedInHome({authorized}) {
if (!authorized) {
return (
<>
<Redirect to={{ pathname: "/" }}/>
</>
);
}
else {
///.....
}
However, my authorized value is always set to false or undefined regardless of whether the user creates an account or not.
I've tried changing the redirect to include a state value:
state: { authorized: true}
and then accessing it in loggedInHome.js as such:
function LoggedInHome({authorized}) {
if(this.props.location.state.authorized) {
///.....
}
}
However, this doesn't seem to solve my problem either has the value always ends up being undefined and not true.
Any help would be appreciated.