如何在React Router V4中使用上下文API？

Question

我正在尝试在我的应用程序上使用React 16.3中的新上下文API进行一些测试，但我不明白为什么我的重定向永远无法工作。

<ContextA>
  <Switch>
    <Route exact path='/route1' component={ Component1 } />
    <ContextB>
      <Route exact path='/route2' component={ Component2 } />
      <Route exact path='/route3' component={ Component3 } />
    </ContextB>
    <Redirect from='/' to='/route1' />
  </Switch>
</ContextA>

我不想让我的ContextB可用于所有路由，仅2和3。我该怎么做？

Answer 1

看起来<Switch>应该只具有<Route>和`<Redirect

`组件作为直接子代。（来源）

我想这就是为什么你的Redirect，你使用不工作ContextB的Switch孩子。

最简单但重复的解决方案可能是让您ContextB成为每个<Route>想要的孩子的孩子：

注意：这些解决方案假定您为Context组件分配了默认值，如下所示： const MyContext = React.createContext(defaultValue);

<Route exact path='/route2'>
  <ContextB.Provider>
    <Component1 />
  </ContextB.Provider>
</Route>

您甚至可以ContextRoute为此创建一个组件：

import React from 'react';
import { Route } from 'react-router-dom';

const ContextRoute = ({ contextComponent, component, ...rest }) => {
  const { Provider } = contextComponent;
  const Component = component;

  return (
    <Route {...rest}>
      <Provider>
        <Component />
      </Provider>
    </Route>
  );
};

export default ContextRoute;

然后将其用作路线：

<ContextA>
  <Switch>
    <Route exact path='/route1' component={ Component1 } />
    <ContextRoute exact path='/route2' contextComponent={ContextB} component={ Component2 } />
    <ContextRoute exact path='/route3' contextComponent={ContextB} component={ Component3 } />
    <Redirect from='/' to='/route1' />
  </Switch>
</ContextA>

使用此解决方案，然后将上下文与嵌套组件中的渲染道具一起使用：

return (
  <ContextB.Consumer>
    {value => <div>{value}</div>}
  </ContextB.Consumer>
);

但是我们可以想象到更多的解决方案，例如 HOC ，将上下文值直接传递给路由组件props等等。