CODEWITHSUNDEEP
javascriptreactjsreact-router
PandaMastr
PandaMastr

Reputation: 695

<Redirect/> returns a blank page - ReactJS

Hey guys i'm trying to send a user to the home page using <Redirect/> from react-router when they have been successfully logged in . But no success until now . The timeout is working , but it sends me to a blank page and not to the Home.js . Any idea how this problem can be fixed ?

Confirm.js

import React, { Component } from 'react';
import { BrowserRouter as Router } from 'react-router-dom'
import { Redirect } from 'react-router'
import Route from 'react-router-dom/Route';

import Home from './HomePage'

class Confirm extends Component {


    state = {
        redirect: false
    }
    componentDidMount() {
        this.id = setTimeout(() => this.setState({ redirect: true }), 3000)
    }
    componentWillUnmount() {
        clearTimeout(this.id)
    }
    render() {
        // setTimeout(function(){alert('Hello!');},3000); 
        return (
            <Router>
                <div className='Confirm'>
                    <Route path='/confirm' render={
                        () => {
                            return this.state.redirect
                                ? <Redirect exact to="/" component={Home} />
                                : <div className='Success'>
                                    <h1>Confirmed Session</h1>
                                    <p>Okay you are good to go . Your session has started .</p>

                                </div>

                        }
                    } />
                </div>
            </Router>
        );
    }
}
export default Confirm;

Upvotes: 0

Views: 4028

Answers (1)

U Rogel
U Rogel

Reputation: 1941

Your <Route />'s need to live one next to the other:

root.js

<Router>
  <Switch>  
    <Route path="/" component={Home} />
    <Route path="/confirm" component={Confirm} />
  </Switch>
</Router>

confirm.js

if (this.state.redirect) {
  return <Redirect to="/" >
} else {
  <div>
    your confirm page
  </div>
}

Now you can redirect from one to the other, and the entire page should be replaced.

Also take a look at the <Switch> Component from the react-router library.

EDIT: Redirect isn't expecting a component prop

Upvotes: 2

Related Questions