The context `router` is marked as required in `Redirect`, but its value is `undefined`

yemerra Published at Dev

yemerra

Dependencies:

[email protected]
[email protected]
[email protected]
[email protected]

I have two projects. Lets call them project A and project B. Project A is a dependency of project B and has the following line multiple times in the code:

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

But every time I want to redirect to another page by using Redirect, I get the following error (this only happens when this redirect from project A is called as a dependency of project 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.

What does this message even imply? I don't know at all what I am doing wrong or where to look at.

One more, and very similar error message that pops up in some circumstances (login e.g.) is this:

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.

I can't really see how Redirect or Switch is outside of Router. That's just doesn't seem to be true.

EDIT:

This might be relevant too:

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:

In the DefaultLayout mentioned in the second error message:

<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>

In the Login component mentioned in the first stack trace:

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

yemerra

The problem is that project A, which is a dependency of project B, has a node_modules folder when I do npm link on this project. The described problem doesn't occur anymore when node_modules is deleted/not present.

EDIT:

Actually, it turned out that this wasn't the real solution. The solution that worked on all projects was that you have to manually include react-router with the same version as react-router-dom.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2020-11-24

Comments

0 comments

Warning: Failed prop type: The prop `store` is marked as required in `Provider`, but its value is `undefined`. in Provider

reactjs Delete Operation Warning: Failed prop type: The prop `role` is marked as required in `ManageRolePage`, but its value is `null`

How to fix this issue “Warning: Failed prop type: The prop `title` is marked as required in `Tab`, but its value is `undefined`.”

TOP Ranking

Article

The context `router` is marked as required in `Redirect`, but its value is `undefined`

The context `router` is marked as required in `Redirect`, but its value is `undefined`

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Loopback Error: connect ECONNREFUSED 127.0.0.1:3306 (MAMP)

How to import an asset in swift using Bundle.main.path() in a react-native native module

pump.io port in URL

Compiler error CS0246 (type or namespace not found) on using Ninject in ASP.NET vNext

BigQuery - concatenate ignoring NULL

ngClass error (Can't bind ngClass since it isn't a known property of div) in Angular 11.0.3

ggplotly no applicable method for 'plotly_build' applied to an object of class "NULL" if statements

Spring Boot JPA PostgreSQL Web App - Internal Authentication Error

How to remove the extra space from right in a webview?

java.lang.NullPointerException: Cannot read the array length because "<local3>" is null

Jquery different data trapped from direct mousedown event and simulation via $(this).trigger('mousedown');

flutter: dropdown item programmatically unselect problem

How to use merge windows unallocated space into Ubuntu using GParted?

Change dd-mm-yyyy date format of dataframe date column to yyyy-mm-dd

Nuget add packages gives access denied errors

Svchost high CPU from Microsoft.BingWeather app errors

Can't pre-populate phone number and message body in SMS link on iPhones when SMS app is not running in the background

12.04.3--- Dconf Editor won't show com>canonical>unity option

Any way to remove trailing whitespace *FOR EDITED* lines in Eclipse [for Java]?

maven-jaxb2-plugin cannot generate classes due to two declarations cause a collision in ObjectFactory class

Any way to remove trailing whitespace FOR EDITED lines in Eclipse [for Java]?