如何在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

这将解决你的问题，因为我这样做在我的应用程序。

<Route
  path="/"
  render={(props) => (
    <ContextB>
      <Component2 {...props} />
    </ContextB>
  )}
/>

Answer 2

作为对其他人的警告，接受的答案并不像你从最初的（不起作用的）概念中期望的那样起作用：

// This comes from the original question (doesn't work as-is!)
<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>

在那里，/route2和/route3共享一个上下文，期望是：

1. 在路由转换之间保持状态。
2. 如果Component2或Component3更新上下文，则更改应反映回另一个。

对于已接受的解决方案，上述情况均不成立。

Answer 3

看起来像是

我想这就是为什么您的重定向在使用ContextB作为Switch子节点时不起作用的原因。

最简单但重复的解决方案是将您的ContextB作为每个

注意：这些解决方案假设您指定了上下文组件的默认值，如下所示：const MyContext=React。createContext（defaultValue）

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

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

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，将上下文值直接传递给路由组件道具，等等。。。