Auto redirect with React?

Question

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:

*given number of milliseconds*, where you are running timer? possible ways of redirecting is either use `Redirect` component or use `this.props.history.push(.....)`. — Mayank Shukla, Jan 17 '18 at 06:36
execute a function in setTimeout which programmatically routes to the desired url, check this on how to navigate programmatically, https://stackoverflow.com/questions/44127739/programmatically-navigate-using-react-router/44128108#44128108 — Shubham Khatri, Jan 17 '18 at 06:54

score 1 · Answer 1 · answered Jan 17 '18 at 06:44

1

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

answered Jan 17 '18 at 06:44

simbathesailor

3,440
2
15
25

Thanks for the info. Added some additional info to my question with some things tried from this. Still having some issues though.... – Mark Jan 21 '18 at 07:56
Browserrouter.push doesnot exist. You can import { browserHistory } from "react-router" and then do browserHistory.push("your/route"). – simbathesailor Jan 21 '18 at 08:01
Just a friendly reminder that browserHistory doesn't work on react-router v4 – kng Jan 21 '18 at 08:12
Oh that i did not know , please look for the corresponding option available in react-router 4 if you are on react route v4 – simbathesailor Jan 21 '18 at 08:13

kng · Answer 2 · 2018-01-22T05:47:15.350

1

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.

edited Jan 22 '18 at 05:47

answered Jan 17 '18 at 06:47

kng

587
2
9

Thanks for the info. Added some additional info to my question with some things tried from this. Still having some issues though.... – Mark Jan 21 '18 at 07:56
I don't think you need to import anything from 'react-router-dom' in your file, because I don't see any places where you use it (in that file). Also, I'm a bit confused about why you're doing "BrowserRouter.push". It should be "this.props.history.push". The poster below mentioned "browserhistory.push" which works in react-router v3 but be careful because it changed in v4 – kng Jan 21 '18 at 08:10
I am not following the component did and didnot mount. Do those go in the same component? Because if the component did mount, it is already rendered. So then I just use the `Hashrouter` instead or the `Browserrouter`? – Mark Jan 22 '18 at 05:26
Here's a link that might help: https://www.youtube.com/watch?v=1iAG6h9ff5s If you have any questions after watching I'm happy to answer them :) – kng Jan 22 '18 at 05:55

Auto redirect with React?

2 Answers2