How to redirect page with Javascript in React-Router?

Question

I using react-router in my application.

In my login page, I needing authentication with ajax and redirect if success.

Some like following code:

class PageLogin extends React.Component {
    login() {
        // How to can I redirect to another page if auth success?
    }

    render() {
        return (
            <div className="login-page">
                <form action="">
                    <div className="form-group">
                        <label>Username:</label>
                        <input type="text"/>
                    </div>
                    <div className="form-group">
                        <label>Password:</label>
                        <input type="text"/>
                    </div>
                    <div>
                        <button onClick={this.login}>Login</button>
                    </div>
                </form>
            </div>
        )
    }
}

In my login function, how to can I redirect to another page if authentication success?

rishat · Accepted Answer · 2017-12-05 17:52:18Z

14

Context is the best option, however official documentation tells that you can also use withRouter to put router prop to your component that would correctly perform history state transition:

import { withRouter } from 'react-router';

class PageLogin extends React.Component {
    login() {
        this.props.history.push('/some/location'); // for react-router@3 it would be this.props.router.push('/some/location');
    }

    render() {
        return (
            <div className="login-page">
                <form action="">
                    <div className="form-group">
                        <label>Username:</label>
                        <input type="text"/>
                    </div>
                    <div className="form-group">
                        <label>Password:</label>
                        <input type="text"/>
                    </div>
                    <div>
                        <button onClick={this.login}>Login</button>
                    </div>
                </form>
            </div>
        )
    }
}

export default withRouter(PageLogin);

edited Dec 5, 2017 at 17:52

answered Nov 29, 2016 at 14:23

rishat

8,3765 gold badges51 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Anil Over a year ago

bravvoo..!! exactly what i was looking for Thanks a lot!!

Doug Over a year ago

link is 404, think new location is reacttraining.com/react-router/web/api/Router

Konstantin Vahrushev Over a year ago

for v.4.2.0 it is: this.props.history.push('/');

rishat Over a year ago

Doug & Konstantin, thanks, folks! The link and the reference property in the example are now updated.

BradByte · Accepted Answer · 2016-11-29 14:15:38Z

1

You'll have a reference to the Router in context. You can simply call router.push with your new path to redirect.

class PageLogin extends React.Component {
  login() {
    this.context.router.push('/newPath');
  }
  ...
 }

PageLogin.contextTypes = {
  router: React.PropTypes.object
}

If you don't want to push a route to their history, but instead replace their current route, you can call replace instead. The API is identical to push.

answered Nov 29, 2016 at 14:15

BradByte

11.1k2 gold badges40 silver badges42 bronze badges

1 Comment

BradByte Over a year ago

This is not the current API of React Router.. the selected best answer is the correct usage now.

Collectives™ on Stack Overflow

How to redirect page with Javascript in React-Router?

2 Answers 2

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related