CODEWITHSUNDEEP
reactjsreact-router
widexaraja
widexaraja

Reputation: 21

react router takes some time to redirect/render

Why?

Without router it renders instantly, but with router it takes 5 seconds to render login component at page refresh.

ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={()=>Loading()} persistor={persistor}>
    <Router history={hist}>


        <Route path="/admin" render={props => <AdminLayout {...props} />} />
        <Route path="/rtl" render={props => <RTLLayout {...props} />} />
        <Route path="/login" component={Login} />
        <Route path="/apps" render={props => <AppsLayout {...props} />} />

        <Redirect from="/" to="/login" />

Upvotes: 0

Views: 534

Answers (1)

Ujjawal Raj
Ujjawal Raj

Reputation: 150

Try this out.

        <Redirect from="/" to="/login" />
        <Switch>
        <Route path="/admin" render={props => <AdminLayout {...props} />} />
        <Route path="/rtl" render={props => <RTLLayout {...props} />} />
        <Route path="/login" component={Login} />
        <Route path="/apps" render={props => <AppsLayout {...props} />} />
        </Switch>

If you are trying to render the login component on every visit to your app i would suggest you to use a different approach. I would suggest that you define a state variable isLoggedIn: false in your app.js(or whatever your landing page is), then you can test its value inside render.

if(!this.state.isLoggedIn) {
     this.props.history.push('/login');
   } else {
    //whatever you want
   }

or

if(this.state.isLoggedIn) {
    return <Redirect to='/login'/>
   } else {
    return <HomePage/>
   }

it's your wish how you want to achieve what you are seeking.

Upvotes: 1

Related Questions