匹配路由不会改变路由散列更改

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