集成时我完全陷入困境PrivateRoute
我的 React.js 项目中的 HOC。
这是我的route file
import React, { Component } from "react";
import { Route, Redirect, Switch, BrowserRouter as Router } from 'react-router-dom';
import Dashboard from "../view/Dashboard/Dashboard";
import Login from "../view/Login/Login";
import Admin from "../view/UserManagement/Admin";
import cookie from 'react-cookies'
const PrivateRoute = ({ component, ...rest }) => {
const isAuthed = cookie.load('token')
console.log(isAuthed, 'dddddddddddddddddddd')
return (
<Route {...rest} exact
render = {(props) => (
isAuthed ? (
<div>
{React.createElement(component, props)}
</div>
) :
(
<Redirect
to={{
pathname: '/login',
state: { from: props.location }
}}
/>
)
)}
/>
)
}
class MainPanel extends Component {
render() {
return (
<div style={{ direction: direction }}>
<Router>
<Switch>
<Route path="/login" component={Login}/>
<PrivateRoute path="/" component={Dashboard} />
<PrivateRoute path="/AdminManagement" component={Admin} />
</Switch>
</Router>
</div>
)
}
}
export default withNamespaces('common') (MainPanel);
我对此完全崩溃了,但并没有摆脱这个问题。为什么我的控制台在PrivateRoute
不显示值
React 和 React-router-dom 版本有什么问题吗
先感谢您!!!
The PrivateRoute
您拥有的组件是正确的,但是您只需要重新订购Routes
使他们能够正常工作。/AdminManagement
路线应该在之前/
因为 Switch 渲染第一个匹配的 Route 和Route path
也将匹配其前缀路径
class MainPanel extends Component {
render() {
return (
<div style={{ direction: direction }}>
<Router>
<Switch>
<Route path="/login" component={Login}/>
<PrivateRoute path="/AdminManagement" component={Admin} />
<PrivateRoute path="/" component={Dashboard} />
</Switch>
</Router>
</div>
)
}
}
export default withNamespaces('common') (MainPanel);
工作演示 https://codesandbox.io/s/n3pjopj70p
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)