Matched route not changing on routing hash change

Question

I'm using react-router-dom with react-router-redux and history to manage routing for my app. I'm also using hash history for support on legacy browsers. Below are my route components:

<Switch>
    <Route exact path={'/'} component={...} />
    <Route path={'/a'} component={...} />
    <Route path={'/b'} component={...} />
</Switch>

My app lands at the location: http://something.com/index.html#/, and correctly is routed to the first Route component. However, when using dispatch(push('/a')) in a thunk action creator to attempt to programatically switch routes, I'm finding that the proper route is not being matched.

I'm having a difficult time debugging this... any ideas? I'm thinking it perhaps has to do with the fact that my window.location.pathname is /index.html.

Answer 1

Switch receive a location prop, or must be wrapped with Router component. You can find more information at https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Switch.md#children-node/

If a location prop is given to the , it will override the location prop on the matching child element.

So try one of these ways:

class Example extends Component {
render() {
    return (
        <Switch location={this.props.location}>
          <Route exact path={'/'} component={...} />
          <Route path={'/a'} component={...} />
          <Route path={'/b'} component={...} />
        </Switch>
    );
}

// location is react-router-redux reducer
export default connect(state => ({location: state.location}))(Example);

Or, another way you can do, it's wrap your Switch component with Router component (I pasted code from one of my project):

import React from 'react';
import ReactDOM from 'react-dom';

import { Provider } from 'react-redux';
import { Route, Switch } from 'react-router-dom';
import { ConnectedRouter } from 'react-router-redux';
import createHistory from 'history/createBrowserHistory';
import configureStore from './store/configureStore';


const history = createHistory();

const store = configureStore(history);

// We wrap Switch component with ConnectedRouter:
ReactDOM.render(
    <Provider store={store}>                
            <ConnectedRouter history={history}>
                <Switch>
                    <Route exact path={'/'} component={...} />
                    <Route path={'/a'} component={...} />
                    <Route path={'/b'} component={...} />              
                </Switch>
            </ConnectedRouter>
    </Provider>,
    document.getElementById('root')
);

More information about Router components you can find here: https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Router.md