react-router navigation not working

Question

I'm trying to navigate to a different route like this:

import React from 'react';
import { browserHistory } from 'react-router'

class MyComponent extends React.Component {

    navigate () {

        browserHistory.push('/some-page')

    }

    render () {
        return (            
            <button onClick={this.navigate.bind(this)} />Navigate</button>
        );
    }

}

export default MyComponent;

My routes setup:

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path='/' component={Layout}>
            <IndexRoute component={Home}></IndexRoute>
            <Route path='/some-page' component={SomePage}></Route>
        </Route>
    </Router>,
    document.getElementById('app')
);

When this runs the URL in the browser does indeed change, but that's about all that happens. I'm not actually getting directed to that route. Is there something I'm missing?

Answer 1

You need to be consistent; you declared hashHistory for your router but using browserHistory for your actual routing.

Hash History will append the path after '#/', browserHistory use the newest HTML5 push state to actually change the URL without making any requests.

Each does what they are supposed, but you are listening to something and saying something else ;)