react + react-route-dom 实现路由及登录状态判断及404页面处理

1. 新建项目

使用命令：

yarn create react-app XX(项目名) --template typescript

这是通过yarn安装库，没有的话可通过 npm install yarn -g 安装yarn，，，然后通过以上命令新建react + ts项目

2. 安装react-router-dom

yarn add react-router-dom

注意：这里开始默认安装的是6版本的，，与之前的版本相比，，此版本有较大的改变，，比如Switch不在了，用Routes了，然后就是Redirect重定向没有了，，用Navigate这个东西了。。。。等等

3. 构造文件夹

由于新建项目后，src下只有App，index相关的文件，，，没有存在路由组件，普通组件的专门的文件夹，所以要新建文件夹。

在src下新建pages ,route文件夹，，在pages里新建几个页面

文件夹名称不限，，只要在应用时暴露出的文件，方法时能精准识别，找到

 

 

4. 在route文件夹下配置路由

(1). index.tsx

import React from "react";

interface RouterProps{
  path: string;
  children?: RouterProps[];
  title: string;
  component?: any;
  redirect?: boolean
}

const App = React.lazy(() => import(/* webpackChunkName: "Home" */ "../App"));
const Home = React.lazy(
  () => import(/* webpackChunkName: "Home" */ "../pages/Home")
);
const Login = React.lazy(
  () => import(/* webpackChunkName: "Home" */ "../pages/Login")
);
const NOtFound = React.lazy(()=>import('../pages/notFound'))

const allRoute: RouterProps[] = [
  {
    path: "/",
    title: "首页",
    component: Home,
  },
  {
    path: "/login",
    title: "登录页",
    component: Login,
  },
  {
    path: "*",
    title: "notFound",
    redirect: true
  },
  {
    path: "/404",
    title: "notFound",
    component: NOtFound,
  },
  
];

export type {
  RouterProps,
}
export {
  allRoute
}

主要是路由和页面进行映射，，还有配置404页面，，注意： 

 {
    path: "*",
    title: "notFound",
    redirect: true
  },

 这里是用来判断需不需要重定向

(2). router.tsx

import {
  BrowserRouter,
  Route,
  Routes,
  Navigate,
} from "react-router-dom";
import React, { Suspense } from "react";

import { allRoute, RouterProps } from "./index";

import Auth from './Auth';

// const Login = React.lazy(
//   () => import(/* webpackChunkName: "Home" */ "../pages/Login")
// );

const renderRouter = (routerList: RouterProps[]) => {
  return routerList.map((item) => {
    const { path, children } = item;
   
    // console.log(item.redirect);
    // console.log(userInfo);
    
    return (
      <Route
        key={path}
        path={path}
        element={item.redirect ? <Navigate to="/404" /> : <Auth> <item.component /></Auth>}
      >
        {!!children &&
          children.map((i) => {
            return (
              <Route key={i.path} path={i.path} element={<i.component />} />
            );
          })}
      </Route>
    );
  });
};

const Routers = () => {
  // const userInfo = localStorage.getItem("userInfo");
  return (
    <BrowserRouter>
      <Suspense fallback={<div>Loaing。。。。</div>}>
        {/* Routes代替Switch写法 */}
        <Routes>
          {/* <Route
              path="*"
              element={<Navigate to="/login"></Navigate>}
            ></Route> */}
          {renderRouter(allRoute)}
         
        
        </Routes>
      </Suspense>
    </BrowserRouter>
  );
};

export default React.memo(Routers);

这里的allRoute是来自上面的index.tsx,,,RouteProps是index.tsx暴露出的接口

注意：

element={item.redirect ? <Navigate to="/404" /> : <Auth> <item.component /></Auth>

这里面用到了redirect，，是在上面提到的，，

还有一个Auth组件，，这是用来判断是否登录的，，，Auth.tsx如下：

(3). Auth.tsx

import { useEffect } from "react";
import {  useNavigate } from "react-router-dom";

export default function Auth({ children }: any) {
  //获取到locationStorage中的token
  const token = localStorage.getItem("token");

  const navigate = useNavigate();

  
  useEffect(() => {
    if (!token) {
      navigate("/login", {replace: true});
    } 
  }, [token]);

  return children

}

 注意： 这已经相当于一个组件，，通过useEffect监听方法，，去判断token是否存在，不存在，则利用编程式路由的方式跳转到登录页面。。。

5. 使用

路由加在/src/index.tsx 中如下：（可能会用不到App.tsx）

 路由加在App.tsx中：(不更改src/index.tsx)

import React from 'react';
import './App.css';
import Routers from './route/router';

function App() {
  return (
    <div className="App">
      <Routers></Routers>
    </div>
  );
}

export default App;