Как использовать контекстный API с реагировать маршрутизатор v4?

Question

Я пытаюсь в своем приложении провести несколько тестов с новым контекстным API из React 16.3, но не могу понять, почему мой редирект никогда не работает.

<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. это решит вашу проблему, как я сделал это в моем приложении.

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

Answer 2

Похоже, что <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 , передавая значение контекста непосредственно в подпорки компонента маршрута и т. Д. *