第四章： 主页菜单与路由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 (
    <Layout>
      <Header className="header">
        <div
          style={{
            width: 50,
            background: "rgba(255, 255, 255, 0.3)",
          }}
        />
        <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["2"]}>
          <Menu.Item key="1">nav 1</Menu.Item>
          <Menu.Item key="2">nav 2</Menu.Item>
          <Menu.Item key="3">nav 3</Menu.Item>
        </Menu>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
          >
            <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
              <Menu.Item key="1">option1</Menu.Item>
              <Menu.Item key="2">option2</Menu.Item>
              <Menu.Item key="3">option3</Menu.Item>
              <Menu.Item key="4">option4</Menu.Item>
            </SubMenu>
            <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
              <Menu.Item key="5">option5</Menu.Item>
              <Menu.Item key="6">option6</Menu.Item>
              <Menu.Item key="7">option7</Menu.Item>
              <Menu.Item key="8">option8</Menu.Item>
            </SubMenu>
            <SubMenu
              key="sub3"
              icon={<NotificationOutlined />}
              title="subnav 3"
            >
              <Menu.Item key="9">option9</Menu.Item>
              <Menu.Item key="10">option10</Menu.Item>
              <Menu.Item key="11">option11</Menu.Item>
              <Menu.Item key="12">option12</Menu.Item>
            </SubMenu>
          </Menu>
        </Sider>
        <Layout style={{ padding: "0 24px 24px" }}>
          <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            Content
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};
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 <MainMenu />;
  }
  return <Navigate to="/login" />;
};

const Main = () => {

  return (
    <div className="main">
      <HashRouter>
        <Routes>
          <Route path="/" element={isLogin()}></Route>
          <Route path="/login" element={<Login />}></Route>
        </Routes>
      </HashRouter>
    </div>
  );
};
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(
  <Provider store={store}>
    <Main />
  </Provider>,
  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 (
    <Result
      status="404"
      title="404"
      subTitle="Sorry, the page you visited does not exist."
      extra={
        <Button
          type="primary"
          onClick={() => {
            // 找不到页面后返回menu
            navigate("/");
          }}
        >
          Back Home
        </Button>
      }
    />
  );
};
export default NotFound;

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

<HashRouter>
        <Routes>
          <Route path="/" element={isLogin()}></Route>
          <Route path="/login" element={<Login />}></Route>
          <Route path="*" element={<NotFound />}></Route>
        </Routes>
      </HashRouter>

路由的基本就搭建完成。