React Route Using Browserhistory Changes Url But Nothing Happens

I'm trying to get a react router to work. This is my code: var hashHistory = require('react-router-dom').hashHistory; var BrowserRouter = require('react-router-dom').BrowserRouter;

Solution 1:

It seems like when you switch to /login it matches to /:

<Routepath="/"component={Index} />

Try to add exact prop to the route, like this:

<Routeexactpath="/"component={Index} />

What you can also try to do is to change the matching order:

<Routepath="/login"component={Login} /><Routepath="/"component={Index} />

Solution 2:

Is your index.js a separate file or component? If so you need to use the router middleware to connect it to react-router.

Either import the Link component and use it directly, or bind a click handler and wrap withRouter to mount the router calls to the props.

importReactfrom'react';
import {Link, withRouter} from'react-router';

classTestextendsReact.Component {

    constructor(props) {
        super(props);
        this.handleLink = this.handleLink.bind(this);
    }

    handleLink() {
        this.props.history.push('/login')
    }

    render() {
        return (
             <div><Linkto={{pathname: '/login'}}>Link</Link><buttononClick={this.handleLink}>Click</button></div>
        );
    }

 }

 exportdefaultwithRouter(Test);