Контекст `router` помечен как необходимый в` Redirect`, но его значение равно `undefined` - PullRequest
Новая
       2

Контекст `router` помечен как необходимый в` Redirect`, но его значение равно `undefined`

2 голосов
/ 09 мая 2019

Зависимости: 

react@16.8.4
react-dom@16.8.4
react-router@4.3.1
react-router-dom@4.3.1

У меня есть два проекта.Давайте назовем их проектом A и проектом B. Проект A является зависимостью проекта B и несколько раз содержит следующую строку в коде: 

if (this.state.redirectToOverview) {
    return <Redirect push to={'/path'}/>;
}

Но каждый раз, когда я хочу перенаправить на другую страницу с помощью Redirect, Я получаю следующую ошибку (это происходит только тогда, когда это перенаправление из проекта A называется зависимостью проекта B): 

checkPropTypes.js:20 Warning: Failed context type: The context `router` is marked as required in `Redirect`, but its value is `undefined`.
    in Redirect
    in Login (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
getMaskedContext @ react-dom.development.js:9656
constructClassInstance @ react-dom.development.js:11351
updateClassComponent @ react-dom.development.js:14687
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
enqueueSetState @ react-dom.development.js:11169
push../node_modules/applicationA-frontend/node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Login.js:92
setTimeout (async)
authenticate @ ClientSideAuthManager.js:9
(anonymous) @ Login.js:91
Promise.then (async)
(anonymous) @ Login.js:89
(anonymous) @ Login.js:67
Promise.then (async)
then @ request-base.js:253
(anonymous) @ Login.js:64
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4826
batchedUpdates$1 @ react-dom.development.js:20439
batchedUpdates @ react-dom.development.js:2151
dispatchEvent @ react-dom.development.js:4905
(anonymous) @ react-dom.development.js:20490
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:20489
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882
browser.js:38 Uncaught Error: You should not use <Redirect> outside a <Router>
    at invariant (browser.js:38)
    at Redirect.componentWillMount (Redirect.js:35)
    at callComponentWillMount (react-dom.development.js:11421)
    at mountClassInstance (react-dom.development.js:11514)
    at updateClassComponent (react-dom.development.js:14688)
    at beginWork (react-dom.development.js:15644)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
invariant @ browser.js:38
componentWillMount @ Redirect.js:35
callComponentWillMount @ react-dom.development.js:11421
mountClassInstance @ react-dom.development.js:11514
updateClassComponent @ react-dom.development.js:14688
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18578
renderRoot @ react-dom.development.js:19468
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
enqueueSetState @ react-dom.development.js:11169
push../node_modules/applicationA-frontend/node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
(anonymous) @ Login.js:92
setTimeout (async)
authenticate @ ClientSideAuthManager.js:9
(anonymous) @ Login.js:91
Promise.then (async)
(anonymous) @ Login.js:89
(anonymous) @ Login.js:67
Promise.then (async)
then @ request-base.js:253
(anonymous) @ Login.js:64
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
invokeGuardedCallbackAndCatchFirstError @ react-dom.development.js:270
executeDispatch @ react-dom.development.js:561
executeDispatchesInOrder @ react-dom.development.js:583
executeDispatchesAndRelease @ react-dom.development.js:680
executeDispatchesAndReleaseTopLevel @ react-dom.development.js:688
forEachAccumulated @ react-dom.development.js:662
runEventsInBatch @ react-dom.development.js:816
runExtractedEventsInBatch @ react-dom.development.js:824
handleTopLevel @ react-dom.development.js:4826
batchedUpdates$1 @ react-dom.development.js:20439
batchedUpdates @ react-dom.development.js:2151
dispatchEvent @ react-dom.development.js:4905
(anonymous) @ react-dom.development.js:20490
unstable_runWithPriority @ scheduler.development.js:255
interactiveUpdates$1 @ react-dom.development.js:20489
interactiveUpdates @ react-dom.development.js:2170
dispatchInteractiveEvent @ react-dom.development.js:4882
react-dom.development.js:17117 The above error occurred in the <Redirect> component:
    in Redirect
    in Login (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://..../react-error-boundaries to learn more about error boundaries.

Что означает это сообщение?Я вообще не знаю, что я делаю неправильно или на что посмотреть.

Еще одно и очень похожее сообщение об ошибке, которое появляется при некоторых обстоятельствах (например, при входе в систему), таково: 

Warning: Failed context type: The context `router` is marked as required in `Switch`, but its value is `undefined`.
    in Switch
    in Suspense
    in div
    in main
    in div
    in div
    in DefaultLayout (created by ApplicationLayout)
    in ApplicationLayout (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by PrivateRoute)
    in PrivateRoute (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App
printWarning @ checkPropTypes.js:20
checkPropTypes @ checkPropTypes.js:82
getMaskedContext @ react-dom.development.js:9656
constructClassInstance @ react-dom.development.js:11351
updateClassComponent @ react-dom.development.js:14687
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
enqueueSetState @ react-dom.development.js:11169
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
update @ index.js:205
(anonymous) @ index.js:215
Promise.then (async)
_loadModule @ index.js:214
componentWillMount @ index.js:168
callComponentWillMount @ react-dom.development.js:11421
mountClassInstance @ react-dom.development.js:11514
updateClassComponent @ react-dom.development.js:14688
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
scheduleRootUpdate @ react-dom.development.js:20572
updateContainerAtExpirationTime @ react-dom.development.js:20600
updateContainer @ react-dom.development.js:20657
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20953
(anonymous) @ react-dom.development.js:21090
unbatchedUpdates @ react-dom.development.js:20459
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21086
render @ react-dom.development.js:21155
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:766
fn @ bootstrap:129
0 @ bundle.js:30584
__webpack_require__ @ bootstrap:766
(anonymous) @ bootstrap:901
(anonymous) @ bootstrap:901
browser.js:38 Uncaught Error: You should not use <Switch> outside a <Router>
    at invariant (browser.js:38)
    at Switch.componentWillMount (Switch.js:27)
    at callComponentWillMount (react-dom.development.js:11421)
    at mountClassInstance (react-dom.development.js:11514)
    at updateClassComponent (react-dom.development.js:14688)
    at beginWork (react-dom.development.js:15644)
    at performUnitOfWork (react-dom.development.js:19312)
    at workLoop (react-dom.development.js:19352)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
invariant @ browser.js:38
componentWillMount @ Switch.js:27
callComponentWillMount @ react-dom.development.js:11421
mountClassInstance @ react-dom.development.js:11514
updateClassComponent @ react-dom.development.js:14688
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
callCallback @ react-dom.development.js:149
invokeGuardedCallbackDev @ react-dom.development.js:199
invokeGuardedCallback @ react-dom.development.js:256
replayUnitOfWork @ react-dom.development.js:18578
renderRoot @ react-dom.development.js:19468
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
enqueueSetState @ react-dom.development.js:11169
./node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:335
update @ index.js:205
(anonymous) @ index.js:215
Promise.then (async)
_loadModule @ index.js:214
componentWillMount @ index.js:168
callComponentWillMount @ react-dom.development.js:11421
mountClassInstance @ react-dom.development.js:11514
updateClassComponent @ react-dom.development.js:14688
beginWork @ react-dom.development.js:15644
performUnitOfWork @ react-dom.development.js:19312
workLoop @ react-dom.development.js:19352
renderRoot @ react-dom.development.js:19435
performWorkOnRoot @ react-dom.development.js:20342
performWork @ react-dom.development.js:20254
performSyncWork @ react-dom.development.js:20228
requestWork @ react-dom.development.js:20097
scheduleWork @ react-dom.development.js:19911
scheduleRootUpdate @ react-dom.development.js:20572
updateContainerAtExpirationTime @ react-dom.development.js:20600
updateContainer @ react-dom.development.js:20657
./node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20953
(anonymous) @ react-dom.development.js:21090
unbatchedUpdates @ react-dom.development.js:20459
legacyRenderSubtreeIntoContainer @ react-dom.development.js:21086
render @ react-dom.development.js:21155
./src/index.js @ index.js:7
__webpack_require__ @ bootstrap:766
fn @ bootstrap:129
0 @ bundle.js:30584
__webpack_require__ @ bootstrap:766
(anonymous) @ bootstrap:901
(anonymous) @ bootstrap:901
react-dom.development.js:17117 The above error occurred in the <Switch> component:
    in Switch
    in Suspense
    in div
    in main
    in div
    in div
    in DefaultLayout (created by ApplicationLayout)
    in ApplicationLayout (created by LoadableComponent)
    in LoadableComponent (created by Context.Consumer)
    in Route (created by PrivateRoute)
    in PrivateRoute (created by App)
    in Switch (created by App)
    in Router (created by HashRouter)
    in HashRouter (created by App)
    in App

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://..../react-error-boundaries to learn more about error boundaries.

Я действительно не вижу, как Redirect или Switch находятся за пределами маршрутизатора,Это просто не похоже на правду.

РЕДАКТИРОВАТЬ:

Это также может быть актуально: 

import React, { Component } from 'react';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom';
import Loadable from 'react-loadable';
import './App.scss';

const loading = () => <div className="animated fadeIn pt-3 text-center"><div className="spinner"/></div>;

// Containers
const DefaultLayout = Loadable({
  loader: () => import('./containers/DefaultLayout'),
  loading
});

// Pages
const Login = Loadable({
  loader: () => import('./views/Pages/Login'),
  loading
});

const Activation = Loadable({
  loader: () => import('./views/Activation/Activation'),
  loading
});

const Register = Loadable({
  loader: () => import('./views/Pages/Register'),
  loading
});

const Page404 = Loadable({
  loader: () => import('./views/Pages/Page404'),
  loading
});

const Page500 = Loadable({
  loader: () => import('./views/Pages/Page500'),
  loading
});

class App extends Component {

  render() {

    function PrivateRoute ({component: Component, authed, ...rest}) {
      return (
        <Route {...rest} render={props => (
            localStorage.getItem('authStatus')
            ? <Component {...props} />
            : <Redirect to={{ pathname: '/login', state: { from: props.location } }} />
        )} />
      )
    }

    return (
      <HashRouter>
        <Switch>
          <Route exact path="/login" name="Login Page" component={Login} />
          <Route exact path="/activateprofile" name="Activate profile" component={Activation} />
          <Route exact path="/register" name="Register Page" component={Register} />
          <Route exact path="/404" name="Page 404" component={Page404} />
          <Route exact path="/500" name="Page 500" component={Page500} />
          <PrivateRoute path='/' component={DefaultLayout} />
        </Switch>
      </HashRouter>
    );
  }
}

export default App;

EDIT2:

InDefaultLayout, упомянутый во втором сообщении об ошибке: 

<div>
    <Suspense fallback={this.loading()}>
      <Switch>
         {this.getRoutes().map((route, idx) => {
          return route.component && (this.state.rights.some(e => e.content === route.right) || !route.right ) ? (
            <Route
              key={idx}
              path={route.path}
              exact={route.exact}
              name={route.name}
              render={props => (
                <route.component {...props} />
              )} />
          ) : (null);
        })}
        <Redirect from="/" to="/home" />
     </Switch>
    </Suspense>
  </div>

В компоненте Login, упомянутом в первой трассировке стека: 

if (redirectToReferrer === true) {
    return <Redirect to={from}/>
}

1 Ответ

0 голосов
/ 13 мая 2019

Проблема в том, что проект A, который является зависимостью от проекта B, имеет папку node_modules, когда я выполняю npm link для этого проекта.Описанная проблема больше не возникает, когда node_modules удалено / отсутствует.

РЕДАКТИРОВАТЬ:

На самом деле, оказалось, что это не было реальным решением.Решение, которое работало на всех проектах, заключалось в том, что вы должны вручную включить react-router с той же версией, что и react-router-dom.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...