Reactjs 上下文“路由器”在“重定向”中标记为必需,但其值为“未定义”`

Reactjs 上下文“路由器”在“重定向”中标记为必需,但其值为“未定义”`,reactjs,react-router,Reactjs,React Router,依赖关系: 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'}/>; } 在第一个堆栈跟踪中提到的Login组件中: if (redirectT

依赖关系:

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'}/>;
}
在第一个堆栈跟踪中提到的
Login
组件中:

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

问题在于,项目A是项目B的一个依赖项,当我在该项目上执行
npm链接时,它有一个
node\u modules
文件夹。当
node_modules
被删除/不存在时,所述问题不再发生

编辑:

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

事实上,这并不是真正的解决方案。对所有项目都有效的解决方案是,您必须手动包括与
react router dom
版本相同的
react router

您的
privaterote
在哪里?发布。您是从
react router
导入
Redirect
还是从
react router dom
导入
Redirect
?我通过在末尾添加整个
App
组件来更新帖子。
PrivateRoute
包含在内。@BreakBB正如您现在看到的,它是
react router dom
。您提到了项目A和B,但我不明白它们是如何连接的。你能解释一下/展示一下你是如何导入/使用其中一个的吗?
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;
<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>
if (redirectToReferrer === true) {
    return <Redirect to={from}/>
}