PrivateRoute 在 reactjs react-router-dom 中不起作用

Question

在我的 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 版本有什么問題嗎

先感謝您！！！

Answer 1

您擁有的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);

工作演示

Answer 2

這是我處理我的私人路線的方式，也許它也會對您有所幫助。 我將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);

Answer 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