Блог

Я пытаюсь использовать Redirect компонент маршрутизатора react, но он говорит об этих ошибках:

Предупреждение: Неудачный тип контекста: Контекст router помечен как требуемый Redirect , но его значение равно undefined .

browser.js:38 Неперехваченное инвариантное нарушение: Вы не должны использовать <Redirect> вне <Router>

Тем не менее, я нахожусь внутри маршрутизатора, насколько я могу судить. Компонент, с которым я работаю, ManageSubscriptions называется маршрутом внутри маршрутизатора. `

 
// The following `Main` component is called from inside: 
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App));

// Main.js
<React.Fragment>
  <ScrollToTop>
    <Switch>
      <Route path="/" component={Lobby} exact />
      <Route path="/login" component={Login} exact />
      {/* lots of other routes */}

      {(window.location.hostname.includes("staging") ||
        window.location.hostname.includes("test")) amp;amp; (
        <>
          {/* a few other routes */}
          <Route path="/manage-subscriptions" component={ManageSubscription}/>
        </>
      )}
      <Route path="/*" component={GenericNotFound} />
    </Switch>
  </ScrollToTop>
</React.Fragment>
 

Очевидно, что все маршруты в этом главном разделе выше работают сами по себе.

Вы также можете видеть в дереве компонентов React devtool, что все выглядит нормально (когда я удаляю перенаправление, чтобы приложение работало).:

And in case there’s anything specific about how I’m writing the component, here it is up to the point I use the redirect:

 const ManageSubscription = () => {
  const dispatch = useDispatch();
  const history = useHistory();
  const userSubs = useSelector(state => userSubscriptions(state));
  const isFetching = useSelector(state => isSubscriptionsFetching(state));
  const subscriptions = useSelector(state => allSubscriptions(state));

  useEffect(() => {
    const fetchPlans = async () => {
      await dispatch(fetchUserSubscriptions());
      await dispatch(fetchSubscriptionList());
    };
    fetchPlans();
  }, [dispatch]);

  if (isFetching) return (
    <LoadingContainer>
      <LoadingIndicator />
    </LoadingContainer>
  );

  if (!userSubs.length) return <Redirect to="/profile"/>;