React Router *Not Found* rendered first before main routes - reactjs

Question

i am working on a huge project and i have an authorization system where Logged in users can access certain routes while the Not Found component, served on Logged Out Users. The problem is, when a user is marked as logged in and has a valid token and then proceed into a page (e.g /account), the component Not Found is rendered first and a second later the component account is rendered correctly.
I have an async componentDidMount where i validate my token and if it's valid, i set the state of isLogged: true. Also on each route in my switch i am checking the the state of isLogged and only then i send the corresponding component.
My async componentDidMount
{/* Username is from localstorage */}
async componentDidMount() {
if ((USERNAME != "") && (USERNAME != null)) {
const logged = await checkTheToken({'Username': USERNAME}).then((result) => {
if(result.status == 202) {
this.setState({isLogged: true});
this.setState({checking: false});
};
});
}
}
This is the Router (* supposing we are trying to access /user page. Notice i use react-router, react-router-dom ^4.1.1* )
if (this.state.checking) {
return null;
} else {
return (
<Router>
<Switch>
{/* This is Not Rendered First and Not Found rendered before FALSLY */}
{this.state.isLogged && <Route exact path="/user" component={() => (<User isLogged={this.state.isLogged} username={USERNAME} />)} />}
{/* This is Rendered First and Not Found is not rendering at all CORRECTLY */}
<Route exact path="/test" component={() => (<Test isLogged={this.state.isLogged} />)} />
<Route component={() => (<NotFound isLogged={this.state.isLogged} />)} />
</Switch>
</Router>
);
I think the problem is in the {this.state.isLogged && ...} because if we try to access /test the component is rendered correctly without Not Found rendering first.
Also, I tested all the lifecycle methods

Answer 1

I think you're right and the issue comes from {this.state.isLogged && ...}
Lets take it step by step.
First this.state.isLogged is falsy. It does mean that <User isLogged={this.state.isLogged} username={USERNAME} /> is not currently in the ReactRouter configuration.
We can guess that ReactRouter will match the default component (<Route component={() => (<NotFound isLogged={this.state.isLogged} />)} />) since /user is not in its configuration.
The actual behavior is then correct.
The fastest way to archieve your goal would be to move the token check into your child component with something like this :
async componentDidMount() {
if ((USERNAME != "") && (USERNAME != null)) {
const logged = await checkTheToken({'Username': USERNAME}).then((result) => {
if(result.status !== 202) {
history.push('/not-found')
} else {
this.setState({isLogged: true});
this.setState({checking: false});
};
});
}
}
Rendering function would like this :
render () {
if(!this.state.isLogged) return <span />
return <div>...</div>
}
The main problem with this aproach is that it would require all your authenticated components to implement this.
You'll also need to factorize the code into a service to avoid multiple calls.
A 2nd approach would be to fatorize this into a proxy component that do the check like this :
<Router>
<Switch>
<Route component={Authenticated}>
<Route exact path="/user" component={() => (<User isLogged={this.state.isLogged} username={USERNAME} />)} />
</Route>
<Route exact path="/test" component={() => (<Test isLogged={this.state.isLogged} />)} />
<Route component={() => (<NotFound isLogged={this.state.isLogged} />)} />
</Switch>
</Router>
This component will now be the one who carry the token check.
Rendering function would look like this :
render () {
if(!this.state.isLogged) return <span />
return {this.props.children}
}
Main problem here is that you can't easily share between your component the "this.state.isLogged"
If you want to share and update mutiple component using some global state, i highly suggest you to give a look at Redux.
Since redux can have a hard learning curve, if you only need to share this single value, you could try some things using the observable pattern. (Example : observable service, observable service + connector )
All my code example are not tested and are here to guide you in the right direction. In my opinion there is a lot of way to archieve what you want, sadly i can only tell you why it currently do not work and i hope i gave you enough clues to find a solution adapted to your use case.