How to Redirect to another page in ReactJS when a IF condition is executed?

Question

I want to redirect to Dashboard.jsx if the username and password matches. How to do that ? I am new to ReactJS.

in the If condition I want to add the redirect code to redirect another page. Pls response. In stackoverflow maximum are using without if condition so here is the difference.

var users={
name:'bddebashis',
password:'debashis111249'
}

class Home extends Component {


constructor() {
    super();
    this.handleSubmit = this.handleSubmit.bind(this);
}


 handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    fetch('/api/form-submit-url', {
        method: 'POST',
        body: data,
    });

    if(data.get('usr')==users.name && data.get('paswd')==users.password){
      <Redirect to='./Dashboard';/>

    }
  }

remove the dot from redirect , it should be `to='/Dashboard'` , your question has already an answear here :https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs — Abslen Char, May 14 '18 at 11:43
Possible duplicate of [How to use Redirect in the new react-router-dom of Reactjs](https://stackoverflow.com/questions/43230194/how-to-use-redirect-in-the-new-react-router-dom-of-reactjs) — Abslen Char, May 14 '18 at 11:45

score 5 · Accepted Answer · answered May 14 '18 at 11:48

// Are You using BrowserRouter means you can use like this

import PropTypes from 'prop-types';

var users={
    name:'bddebashis',
    password:'debashis111249'
    }

    class Home extends Component {


    constructor() {
        super();
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    static contextTypes = {
        router: PropTypes.object,
      }

     handleSubmit(event) {
        event.preventDefault();
        const data = new FormData(event.target);

        fetch('/api/form-submit-url', {
            method: 'POST',
            body: data,
        });

        if(data.get('usr')==users.name && data.get('paswd')==users.password){
          this.context.router.history.push("/Dashboard")  
        }
      }
    }

Thank you so much prabhu, you saved my time. – KCN Jan 12 '19 at 10:38 — KCN, Jan 12 '19 at 10:38

score 0 · Answer 2 · answered May 14 '18 at 11:43

If you're using React Router you can use Redirect component

https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Redirect.md

 <Redirect to="/dashboard" />

Adding Redirect component inside your render function should be sufficient.

Ikram Ud Daula · Answer 3 · 2018-05-14T12:02:23.603

Redirect makes easier by using history module. Install history module npm install history then configure your add router like this.
AppRouter.js

import { Router, Route, Switch } from 'react-router-dom';
import createHistory from 'history/createBrowserHistory';
export const history = createHistory();

<Router history={history}>
   <Route path="/about" component={AboutPage} />
   <Route ... />
   ...
<Router>

then then redirect to another component.like

import {history} from './AppRouter';

history.push('/dashboard');

Mustkeem K · Answer 4 · 2018-05-14T12:00:26.633

0

import createHistory from 'history/createBrowserHistory';
export const history = createHistory();

<Router history={history}>
   <Route />

   <Router>

In you Dashboard component import history in dashboard use this line to redirect

history.push('/Dashboard');

edited May 14 '18 at 12:00

answered May 14 '18 at 11:51

Mustkeem K

8,158
2
32
43

How to Redirect to another page in ReactJS when a IF condition is executed?

4 Answers4