第四章： 主頁菜單與路由React-router-dom Redux

創(chuàng)建主菜單頁面路徑

/src/pages/menu/index.tsx

在antd中的layout組件找一個(gè)符合自己項(xiàng)目風(fēng)格布局。
/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;

隨后創(chuàng)建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改動較大，請認(rèn)真閱讀官方文檔。

引入后在Main組件中配置基礎(chǔ)路由，并且判斷是否已經(jīng)登錄
代碼如下

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里加一個(gè)退出登錄的點(diǎn)擊操作

// 獲取navigate
  const navigate = useNavigate();
  // 使用navigate跳轉(zhuǎn)到登錄界面，點(diǎn)擊時(shí)調(diào)用
  navigate("/login");

我們再返回main中配置一個(gè)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中新增一個(gè)path=“*”的router

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

路由的基本就搭建完成。