如何使用路由守卫privateRoutes

什么是路由守卫？

路由跳转前做一些验证，比如登录验证，是网站中的普遍需求

导航守卫（navigation-guards）这个名字，听起来怪怪的，但既然官方文档是这样翻译的，就姑且这么叫吧

privateRoute.tsx具体操作，详情见什么是路由守卫（privateRoute）？

我们在src/util下面增加了一个路由守卫的工具,只需要把他引入到您的router文件中，替换之前的route组件即可

在App.tsx中引入privateRoutes.tsx

import { PrivateRoute } from "./utils/privateRoutes";

import React from "react";
import "./App.css";
import { OldApp } from "./oldApp";
import loadable from "@loadable/component";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { JoyNopLayout } from "./common";
import { Spin } from "antd";
import { PrivateRoute } from "./utils/privateRoutes";
import { AboutDemo } from "./aboutdemo/about.com";
const App: React.FC = () => {
  console.log("ENV:", process.env.REACT_APP_ENV);
  const isSignIn=true   //判断是否跳转
  return (
    <div>
      <React.Fragment>
        <Router>
          <Switch>
            <JoyNopLayout>
              <PrivateRoute isSignIn={isSignIn} exact path="/" component={OldApp} />
              <PrivateRoute isSignIn={isSignIn} exact path="/user" component={UserCom} />
              <PrivateRoute isSignIn={isSignIn} exact path="/todo" component={TodoDemo} />
              <PrivateRoute isSignIn={isSignIn} exact path="/about" component={AboutDemo} />
            </JoyNopLayout>
            <Route
              render={() => {
                return <p>Not Found</p>;
              }}
            />
          </Switch>
        </Router>
      </React.Fragment>
    </div>
  );
};
export default App;