javascript - 匹配的路由在路由哈希更改时不会更改

Question

我将 react-router-dom 与 react-router-redux 和 history 一起使用来管理我的应用程序的路由。我还使用哈希历史来支持旧版浏览器。以下是我的路线组件:

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

我的应用程序登陆位置:http://something.com/index.html#/，并正确路由到第一个 Route 组件。但是，当在 thunk Action 创建者中使用 dispatch(push('/a')) 尝试以编程方式切换路由时，我发现没有匹配正确的路由。

我很难调试这个...有什么想法吗？我认为这可能与我的 window.location.pathname 是 /index.html 这一事实有关。

Answer 1

Switch 接收一个 location 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 组件与 Router 组件包装在一起(我粘贴了我的一个项目中的代码):

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')
);

有关 Router 组件的更多信息，您可以在此处找到:https://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/api/Router.md