web-dev-qa-db-fra.com

PrivateRoute ne fonctionne pas dans reactjs react-router-dom

Je suis complètement bloqué lors de l'intégration de PrivateRoute HOC dans mon projet react.js.

Voici mon fichier route

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);

Je me casse totalement la tête avec ça mais je ne me suis pas débarrassé de ce problème. Pourquoi ma console à l'intérieur du PrivateRoute n'affiche pas les valeurs

Y a-t-il un problème avec les versions react et react-router-dom

Merci d'avance!!!

javascriptreactjsreact-routerreact-router-dom
14
Profer

Le composant PrivateRoute que vous avez est correct, mais vous avez seulement besoin de réorganiser votre Routes pour qu'il fonctionne correctement. /AdminManagement l'itinéraire doit précéder / puisque Switch affiche la première route correspondante et un Route path correspondra également à son chemin de préfixe

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);

Démo de travail

7
Shubham Khatri

Voici comment je gère mes itinéraires privés, peut-être que cela vous aidera également. J'ai protectedRoutes comme tableau avec les routes. vous pouvez les adapter à votre guise.

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: ajout d'un exemple complet basé sur le code d'origine

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);
4
Sabbin

essayez de changer la bibliothèque en 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

2
Vadim Hulevich