CODEWITHSUNDEEP
javascriptreactjshttp-redirectreact-routerreact-router-dom
Mark
Mark

Reputation: 1872

Auto redirect with React?

Given the following component code, is there a way to have this auto-redirect to another route after a given number of milliseconds? 

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter
} from "react-router-dom";
import {
  Container,
  Button,
  Col,
  Row } from 'reactstrap'

class Confirm extends Component {
  render() {
    return (
      <div>
        <Container>
          <Row>
            <p>Reprehenderit reprehenderit laborum excepteur voluptate elit incididunt eu. Ex laboris ex officia do aute non. Dolor proident reprehenderit labore nostrud irure consectetur. Laboris laborum amet veniam tempor nostrud ad. Laborum culpa duis voluptate amet ipsum magna minim reprehenderit. Aute ipsum eiusmod amet occaecat culpa qui nostrud eiusmod dolore anim culpa amet nostrud. Id laborum tempor dolor labore veniam aliqua ipsum esse pariatur. Nisi ipsum eiusmod do eiusmod minim adipisicing aliqua. Nostrud tempor aliquip cupidatat sunt aute esse duis cupidatat culpa elit consectetur eu.</p>
          </Row>
        </Container>
      </div>
    );
  }
}

export default Confirm;

Looking through the docs, it seems there sound be some function within the react-router-dom for this, no?

Thanks much.

EDIT: After researching manipulating some things based on the answers, I did some changes and came up with this:

import React, { Component } from "react";
import {
  Route,
  NavLink,
  HashRouter,
  BrowserRouter
} from "react-router-dom";
import {
  Container,
  Button,
  Col,
  Row } from 'reactstrap'
  import './Confirm.css';

class Confirm extends Component {
  componentDidMount() {
    setTimeout(() => {
    BrowserRouter.push("./home")
  }, 2000)
    }
    render() {
      return (
        <div>
          <Container>
            <Row>
              <p>Reprehenderit reprehenderit laborum excepteur voluptate elit incididunt eu. Ex laboris ex officia do aute non. Dolor proident reprehenderit labore nostrud irure consectetur. Laboris laborum amet veniam tempor nostrud ad. Laborum culpa duis voluptate amet ipsum magna minim reprehenderit. Aute ipsum eiusmod amet occaecat culpa qui nostrud eiusmod dolore anim culpa amet nostrud. Id laborum tempor dolor labore veniam aliqua ipsum esse pariatur. Nisi ipsum eiusmod do eiusmod minim adipisicing aliqua. Nostrud tempor aliquip cupidatat sunt aute esse duis cupidatat culpa elit consectetur eu.</p>
            </Row>
          </Container>
        </div>
      );
    }
  }

export default Confirm;

But push does not work for some reason. Is this because of a conflict between hashrouter and browserrouter?

What I get is this:

enter image description here

Upvotes: 1

Views: 950

Answers (2)

kng
kng

Reputation: 627

You can use the history prop anywhere within a component that has access to it. In componentDidMount() you can do :

this.handle = setTimeout(()=>{this.props.history.push(myUrl);}, milisecs);

And in componentDidUnmount() you cancel it, because it's possible that you'll go somewhere else before the time period is over, and then it will still redirect you for no apparent reason:

clearTimeout(this.handle);

I'm assuming that your Confirm component is used directly as the 'component' prop of some Route.
Like so

<Route path='/myUrl' component={Confirm} />

That's how you get access to the history prop. If not, you will need to wrap Confirm like so:

import {withRouter} from 'react-router';
// define Confirm
export default withRouter(Confirm);

And that will give your wrapped component access to the special routing props.

Upvotes: 1

simbathesailor
simbathesailor

Reputation: 3687

class Confirm extends Component {
 componentDidMount() {
  setTimeout(() => {
  browserhistory.push("path/to/your/next/route")
}, 2000)
  }
  render() {
    return (
      <div>
        <Container>
          <Row>
            <p>Reprehenderit reprehenderit laborum excepteur voluptate elit incididunt eu. Ex laboris ex officia do aute non. Dolor proident reprehenderit labore nostrud irure consectetur. Laboris laborum amet veniam tempor nostrud ad. Laborum culpa duis voluptate amet ipsum magna minim reprehenderit. Aute ipsum eiusmod amet occaecat culpa qui nostrud eiusmod dolore anim culpa amet nostrud. Id laborum tempor dolor labore veniam aliqua ipsum esse pariatur. Nisi ipsum eiusmod do eiusmod minim adipisicing aliqua. Nostrud tempor aliquip cupidatat sunt aute esse duis cupidatat culpa elit consectetur eu.</p>
          </Row>
        </Container>
      </div>
    );
  }
}

This should do the job, using componentDidMount because it will only happen once in lifecycle and also component is mounted

Upvotes: 1

Related Questions