PrivateRoute не работает в ReactJS
Я полностью застрял при интеграции PrivateRoute HOC в свой проект react.js.
Вот мой файл маршрут
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.info(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?
Заранее спасибо!!!
Вы пытались получить доступ к панели инструментов или странице администратора, чтобы активировать этот console.info?
@dnp1204 да, ты прав
@Weedoze да, но это ничего не утешает
Вы получаете какую-либо ошибку в консоли
@ShubhamKhatri Нет, сэр, в консоли нет ошибки.
Не могли бы вы подготовить демонстрацию, которая воспроизводит вашу ошибку
@ShubhamKhatri Есть ли место, где я могу создать скрипку?
@ShubhamKhatri Пожалуйста, посмотрите codeandbox.io/s/1zx57kl594
Давайте продолжить обсуждение в чате.
попробуйте это решение stackoverflow.com/a/54626313/10761855
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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);Это не отвечает на вопрос ОП
Это просто другой подход к рассматриваемой проблеме. Я согласен, что это не отвечает на вопрос, но может помочь достичь желаемого результата. Если нет, я с удовольствием удалю ответ
Компонент 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);
Спасибо... Но это работает частично. Он всегда перенаправляет меня на /login. Почему так?
@Profer, потому что localStorage должен быть установлен при входе в систему, иначе он никогда не будет работать.
@Profer, смогли ли вы решить вышеуказанную проблему с помощью приведенного выше ответа.
@Profer, не беспокойся о награде. Я не получил от вас никакого ответа после моего последнего комментария, поэтому я хотел подтвердить
/AdminManagement route should come before / since Switch renders the first matching Route and a Route path will also match its prefix path, поэтому /AdmingManagement также соответствует /, и, следовательно, Admin не будет отображаться, но Dashboard всегда будет отображаться в вашем случае.
попробуйте сменить библиотеку на 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 }
}}
/>
)
}
/>
);
https://codesandbox.io/s/015k0jl0ql
Это не отвечает на вопрос ОП + ОП уже использует библиотеку реагирования на файлы cookie.
Почему нет? если вы измените lib, вы можете увидеть данные в console.info из файла cookie
OP нужно решение с текущими библиотеками. Другая библиотека не нужна для решения его проблемы.
Вы имеете в виду, что когда вы переходите к компоненту Dashboard или Admin, журнал консоли ничего не печатает?