在我的react.js项目中集成PrivateRoute
HOC时,我完全陷入困境。
这是我的路线文件
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版本是否有问题
预先感谢您!
答案 0 :(得分:5)
您拥有的PrivateRoute
组件是正确的,但是您只需要重新排序Routes
即可使其正常工作。 /AdminManagement
路由应位于/
之前,因为Switch会呈现第一个匹配的路由,而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);
答案 1 :(得分:3)
这是我处理私人路线的方式,也许对您也有帮助。我将protectedRoutes
作为带有路由的数组。您可以根据需要调整它们的大小。
const routes = [
{
path: '/login', exact: true, name: 'Login', component: Login,
},
];
const protectedRoutes = [
{
path: '/admin', exact: true, name: 'Admin', component: Admin,
},
];
<Switch>
{routes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<route.component {...props} />
)}
/>
)
: (null)))}
{protectedRoutes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
isAuth
? <route.component {...props} />
: <Redirect to="/login" />
)}
/>
)
: (null)))}
</Switch>
LE:添加了基于原始代码的完整示例
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 routes = [
{
path: '/login', exact: true, name: 'Login', component: Login,
},
];
const protectedRoutes = [
{
path: '/', exact: true, name: 'Dashboard', component: Dashboard,
},
{
path: '/AdminManagement', exact: true, name: 'Admin', component: Admin,
},
];
class MainPanel extends Component {
constructor(props) {
super(props);
this.state = {
isAuthed: cookie.load('token'),
},
};
render() {
const { isAuthed } = this.state;
return (
<div style={{ direction: direction }}>
<Router>
<Switch>
{routes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
<route.component {...props} />
)}
/>
)
: (null)))}
{protectedRoutes.map((route, idx) => (route.component ? (
<Route
key={idx}
path={route.path}
exact={route.exact}
name={route.name}
render={props => (
isAuth
? <route.component {...props} />
: <Redirect to="/login" />
)}
/>
)
: (null)))}
</Switch>
</Router>
</div>
)
}
}
export default withNamespaces('common')(MainPanel);
答案 2 :(得分:2)
尝试将库更改为react-cookie
;
let PrivateRoute = ({ component: Component, cookies, ...rest }) => (
<Route
{...rest}
render={props =>
cookies.get("name") ? (
<Component {...props} />
) : (
<Redirect
to={{
pathname: "/login",
state: { from: props.location }
}}
/>
)
}
/>
);