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