PrivateRoute не работает в реагировать-маршрутизатор-дом

Я полностью застрял при интеграции PrivateRoute HOC в мой проектact.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.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 не показывает значения

Есть ли какие-либо проблемы с версиями реагировать и реагировать на маршрутизатор-дом?

Заранее спасибо!!!

Ответ 1

Компонент PrivateRoute который у вас есть, правильный, однако вам нужно только 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);

Рабочая демонстрация

Ответ 2

Вот как я справляюсь со своими личными маршрутами, возможно, это поможет и вам. Я protectedRoutes маршруты как массив с маршрутами. Вы можете подогнать их как хотите.

const routes = [
  {
    path: '/login', exact: true, name: 'Login', component: Login,
  },
];

const protectedRoutes = [
  {
    path: '/admin', exact: true, name: 'Admin', component: Admin,
  },
];

Ответ 3

попробуйте поменять библиотеку на 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