我正在使用react-router-dom和react-router-redux以及历史来管理我的应用程序的路由.我还使用哈希历史记录来支持旧版浏览器.以下是我的路线组件：
<Switch>
<Route exact path={'/'} component={...} />
<Route path={'/a'} component={...} />
<Route path={'/b'} component={...} />
</Switch>
我的应用程序位于以下位置：http：//something.com/index.html#/,并正确路由到第一个Route组件.但是,当在thunk动作创建器中使用dispatch(push(‘/ a’))尝试以编程方式切换路由时,我发现正确的路由没有匹配.
我很难调试这个……任何想法？我想它可能与我的window.location.pathname是/index.html的事实有关.
解决方法
Switch接收位置prop,或者必须用Router组件包装.您可以在
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.
所以尝试以下方法之一：
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);
或者,您可以采用另一种方式,将Switch组件与路由器组件包装在一起(我从我的一个项目中粘贴了代码)：
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')
);
有关路由器组件的更多信息,请访问：https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Router.md
