react---私有路由和权限判断（PrivateRoute + withRouter）

me

需要给<Route/> 套个<Switch></Switch>

PrivateRoute.jsx 私有路由

import React from "react";
import { Route, Redirect } from "react-router-dom";

function PrivateRoute(props) {
  const isLogin = localStorage.getItem("token") ? true : false;
  return isLogin ? (
    <Route
      path={props.path}
      render={() => <props.component></props.component>}
    ></Route>
  ) : (
    <Redirect to="/login" />
  );
}

export default PrivateRoute;

App.js

import React from "react";
// import { BrowserRouter as Router, Route, Link } from "react-router-dom";  不建议使用浏览器历史记录路由BrowserRouter
import {
  HashRouter as Router,
  Route,
  Link,
  // withRouter,
  BrowserRouter,
  Switch,
} from "react-router-dom";
import "./App.css";
import People from "./pages/People";
import { Button } from "antd";
import List from "./pages/List";
import About from "./pages/About";
import Login from "./pages/Login";
import PrivateRoute from "./pages/PrivateRoute";

const Home = (props) => {
  const { history } = props;
  return (
    <div>
      <h1>我是首页</h1>
      <Button onClick={() => history.push("/list")}>列表页</Button>
      <Button onClick={() => history.push("/about")}>关于我们</Button>
    </div>
  );
};

/* const About = (props) => {
  console.log(props);
  return <h1>有什么有什么要联系我们的吗，欢迎您哦</h1>;
};
const AboutPage = withRouter(About); */

function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/list?t=ttt">列表</Link>
          </li>
          <li>
            <Link to="/people">People</Link>
          </li>
        </ul>
        <hr />
        <div className="content">
          <Switch>
            {/* 如果不加exact的话 每个页面都会有/那么每个页面都会有Home页这个内容 */}
            <Route path="/" exact component={Home}></Route>
            {/* <Route path="/list" component={List}></Route>
          <Route path="/people" component={People}></Route> 
          */}
            {/* 因为希望list、people这两个页面是在登陆之后才可以访问的，所以可以加上私有路由 也就是将Route改成PrivateRoute */}
            <PrivateRoute path="/list" component={List}></PrivateRoute>
            <PrivateRoute path="/people" component={People}></PrivateRoute>
            <Route path="/about" render={() => <About />}></Route>
            <Route path="/login" render={() => <Login />}></Route>
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;

List、Login、People这三个页面 需要使用withRouter
也就是 用到了PrivateRoute 和render路由形式的 都需要用到 withRouter
List.jsx

import React from "react";
import { withRouter } from "react-router-dom";

function List(props) {
  console.log(props);
   // 路由组件中会包含
  //    history
  //    location
  //    match
  // 此处可以使用new URLSearchParams获取当前查询条件
  //  使用模块qs也能获取查询条件
  const params = new URLSearchParams(props.location.search);
  console.log(params.get("t"));
  return (
    <div>
      <h1>我是一个列表页</h1>
    </div>
  );
}

export default withRouter(List);

teacher的

主要是这两个页面和自己的有所区别，其他的页面都一样
PrivateRoute.jsx

import React from "react";
import { Route, Redirect } from "react-router-dom";

// 此处定义一个私有路由 需要登录之后才能访问
function PrivateRoute({ children, ...rest }) {
  const isLogined = localStorage.getItem("token") ? true : false;
  // const rest = { ...props };
  // delete rest.children;
  // console.log(rest);
  console.group("私有路由判断");
  console.log(isLogined);
  console.groupEnd();
  return (
    <Route
      {...rest}
      render={() => (isLogined ? children : <Redirect to="/login" />)}
    />
  );
}

export default PrivateRoute;

App.js

import React from "react";
import {
  HashRouter as Router,
  Route,
  Link,
  NavLink,
  Switch,
} from "react-router-dom";
import { Button } from "antd";
import List from "./components/List";
import "./App.css";
import People from "./components/People";
import About from "./pages/About";
import PrivateRoute from "./components/PrivateRoute";
import Login from "./pages/Login";

const Home = (props) => {
  const { history } = props;
  return (
    <div>
      <h1>首页</h1>
      <Button
        onClick={() => {
          // 使用编程式跳转
          history.push("/list");
        }}
      >
        列表页
      </Button>
      <Button
        onClick={() => {
          // 使用编程式跳转
          history.push("/about");
        }}
      >
        关于我们
      </Button>
    </div>
  );
};

// const About = (props) => {
//   console.log(props);
//   return <h1>About us</h1>;
// };

// // 此处为高阶组件
// //  其实就是js中的高阶函数
// //  withRouter是一个函数，接收一个组件作为参数，为组件添加一些路由属性信息
// const AboutPage = withRouter(About);

function App() {
  return (
    <Router>
      <div className="App">
        <ul>
          <li>
            <NavLink exact to="/" isActive={() => true}>
              首页
            </NavLink>
          </li>
          <li>
            <NavLink to="/list?t=cart">列表</NavLink>
          </li>
          <li>
            <NavLink to="/p/oooo">People</NavLink>
          </li>
        </ul>
        <hr />

        {/* Route是一个组件 */}
        <div className="container">
          {/* Switch 只会匹配一个路由内容 ，PrivateRoute就可以用了，如果不加Switch，所有的就会都走一遍而产生冲突导致报错*/}
          <Switch>
            <Route path="/login" render={() => <Login />} />
            {/* exact 表示完全匹配 */}
            <Route path="/" exact component={Home} />
            <PrivateRoute path="/list">
              <List />
            </PrivateRoute>
            <PrivateRoute path="/p/:o">
              <People />
            </PrivateRoute>
            {/* render方式渲染组件，没有直接使用component指定组件
              这时候在路由对应的组件中没有history和location等路由的属性信息
          */}
            <Route path="/about" render={() => <About />} />
          </Switch>
        </div>
      </div>
    </Router>
  );
}

export default App;