React@16.x（39）路由v5.x（4）常见应用场景（1）- 受保护的页面

1，实现

import { BrowserRouter as Router, Route, Switch, Link, Redirect } from "react-router-dom";
import ProtectedRoute from "./ProtectedRoute";
import loginInfo from "./loginInfo";function Login(props) {return (<><h1>登录页</h1><buttononClick={() => {loginInfo.login();// 跳转进入 login 之前，准备进入的页面（受保护页面）if (props.location.state) {props.history.replace(props.location.state);} else {props.history.replace("/");}}}>登录</button></>);
}
function Home() {return (<><h1>Home页</h1><Link to="/personal">个人中心</Link></>);
}function Personal() {return <h1>个人中心页</h1>;
}export default function App() {return (<Router><Switch><Route path="/login" component={Login}></Route><ProtectedRoute path="/personal" component={Personal}></ProtectedRoute><Route component={Home}></Route></Switch></Router>);
}

自定义的 ProtectedRoute 组件。使用方式和 Route 组件一样（参数一致），但需要登录才能进入。

import React from "react";
import { Route, Redirect } from "react-router-dom";
import loginInfo from "./loginInfo";export default function ProtectedRoute({ component: Comp, children, ...rest }) {return (<Route{...rest}render={(values) => {return loginInfo.isLogin ? <Comp /> : <Redirect to={{ pathname: "/login", state: values.location.pathname }}></Redirect>;}}></Route>);
}

2，知识点

1，Route.children 和 Route.render

官方文档

2个都是函数，参数是路由信息（history,location,match ）。

区别：render 只有当路由匹配时才会执行，children 无论是否匹配都会执行。

注意，上面的示例中因为使用了 Switch 组件，所以只会渲染一个路由组件，此时 render 和 children 表现是一致的。

2，保存跳转 login 之前的路由

一般当跳转受保护路由时，如果进入了 /login ，则需要保留之前的路由，方便登录后直接进入。

方式1：将该路由路径作为 search 参数保留，之后跳转。
方式2，将该路径路径保存在 state 中（push 的第2个参数），之后跳转。上面的例子用的该方式。

3，解构参数

如果传递的对象中，需要传递给其他组件，但有的属性不用传递。

此时，可以使用解构+剩余参数，参考上面的 ProtectedRoute 组件。

以上。