React项目框架搭建（CRA版本搭建）四

第四章： 主页菜单与路由React-router-dom Redux

创建主菜单页面路径

/src/pages/menu/index.tsx

在antd中的layout组件找一个符合自己项目风格布局。
/src/pages/menu/index.tsx 代码如下：

import { Layout, Menu, Breadcrumb } from "antd";
import {
  UserOutlined,
  LaptopOutlined,
  NotificationOutlined,
} from "@ant-design/icons";

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const MainMenu = () => {
  return (
    
      

        

        
          nav 1
          nav 2
          nav 3
        
      
      
        
          
            } title="subnav 1">
              option1
              option2
              option3
              option4
            
            } title="subnav 2">
              option5
              option6
              option7
              option8
            
            }
              title="subnav 3"
            >
              option9
              option10
              option11
              option12
            
          
        
        
          
            Home
            List
            App
          
          
            Content
          
        
      
    
  );
};
export default MainMenu;

随后创建main组件，该组件用来判断是否登录、以及一些其他配置。

/src/pages/main/index.tsx

接下里引入react-routerd-dom来配置路由

npm install react-router-dom -S
// or
yarn add react-router-dom

提示：本次react-router-dom选择最新版本6.x版本，6.x版本的react-router-dom API改动较大，请认真阅读官方文档。

引入后在Main组件中配置基础路由，并且判断是否已经登录
代码如下

import cookie from "react-cookies";
import { HashRouter, Navigate, Route, Routes } from "react-router-dom";
import Login from "../login";
import MainMenu from "../menu";

// 判断是否登录 token失效与token
export const tokenIsValid = () => {
  const token = cookie.load("token");
  if (token) {
    return true;
  }
  return false;
};

// 登录后跳到主页，token失效后返回登录页面
const isLogin = () => {
  if (tokenIsValid()) {
    return ;
  }
  return ;
};

const Main = () => {

  return (
    

      
        
          
          }>
        
      
    
  );
};
export default Main;

根目录的index.tsx修改下入口为Main

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import reportWebVitals from "./reportWebVitals";
import "./style/index.less";
import { Provider } from "react-redux";
import store from "./tools/store/store";
import Main from "./pages/main";

ReactDOM.render(
  
    

  ,
  document.getElementById("root")
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

在menu里加一个退出登录的点击操作

// 获取navigate
  const navigate = useNavigate();
  // 使用navigate跳转到登录界面，点击时调用
  navigate("/login");

我们再返回main中配置一个404界面
在src/pages/notFound/index.tsx

import "./index.less";
import { Button, Result } from "antd";
import { useNavigate } from "react-router";

const NotFound = () => {
  const navigate = useNavigate();
  return (
     {
            // 找不到页面后返回menu
            navigate("/");
          }}
        >
          Back Home
        
      }
    />
  );
};
export default NotFound;

在main中新增一个path=“*”的router

        
          
          }>
          }>
        
      

路由的基本就搭建完成。