Source:  Twitter logo

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?

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);
14 users liked answer #0dislike answer #014
rishat profile pic
rishat

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.

1 users liked answer #1dislike answer #11
BradByte profile pic
BradByte

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).