react router v6总结

已于 2024-06-14 08:18:07 修改
阅读量396 收藏
点赞数 3
分类专栏： React react-router 文章标签： react.js javascript react
于 2024-05-10 13:52:15 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/duansamve/article/details/138663161
版权

一、使用createBrowserRouter()创建路由：

  • 路由懒加载
  • 路由鉴权
  • 路由不存在则返回错误页面

1、src/router/index.tsx：

import React, { lazy } from "react";
import { createBrowserRouter } from "react-router-dom";
const ErrorPage = lazy(() => import("@/pages/404/"));
const Auth = lazy(() => import("@/components/auth"));

const router = createBrowserRouter([
  {
    path: "/",
    errorElement: <ErrorPage />,
    async lazy() {
      const { default: App } = await import("@/App");
      return { Component: App };
    },
    children: [
      {
        errorElement: <ErrorPage />,
        children: [
          {
            index: true,
            async lazy() {
              const { default: Home } = await import("@/pages/home/");
              return {
                element: (
                  <Auth>
                    <Home />
                  </Auth>
                )
              };
            }
          },
          {
            path: "collapse",
            async lazy() {
              const { default: Collapse } = await import("@/pages/collapse/");
              return {
                element: (
                  <Auth>
                    <Collapse />
                  </Auth>
                )
              };
            }
          },
          {
            path: "timeline",
            async lazy() {
              const { default: Timeline } = await import("@/pages/timeline/");
              return {
                element: (
                  <Auth>
                    <Timeline />
                  </Auth>
                )
              };
            }
          },
          {
            path: "app",
            async lazy() {
              const { default: Application } = await import(
                "@/pages/application/"
              );
              return {
                element: (
                  <Auth>
                    <Application />
                  </Auth>
                )
              };
            }
          }
        ]
      }
    ]
  },
  {
    path: "/login",
    async lazy() {
      const { default: Admin } = await import("@/pages/login/");
      return {
        element: (
          <Auth>
            <Admin />
          </Auth>
        )
      };
    }
  }
]);

export default router;

注意其中的index: true

          {
            index: true,
            async lazy() {
              const { default: Home } = await import("@/pages/home/");
              return {
                element: (
                  <Auth>
                    <Home />
                  </Auth>
                )
              };
            }
          }

2、src/index.tsx：

import React from "react";
import ReactDOM from "react-dom/client";
import { RouterProvider } from "react-router-dom";
import router from "@/router";
import reportWebVitals from "@/reportWebVitals";
import "@/index.css";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

root.render(<RouterProvider router={router} />);

// 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();

注意其中的：

<RouterProvider router={router} />

3、src/App.tsx：添加占位符<Outlet/>

import React from "react";
import { Layout } from "antd";
import Dropdown from "@/components/header/Dropdown";
import Search from "@/components/header/Search";
import SiderMenu from "@/components/sider-menu/";
import { Outlet } from "react-router-dom";
import { observer } from "mobx-react";
import mobxData from "@/store/mobx-data";
import "@/App.css";

const { Header, Content, Sider } = Layout;

const App: React.FC = () => {
  return (
    <Layout className="app-layout">
      <Header className="app-header">
        <div className="app-logo">
          <img height="36" src={require("@/logo.png")} />
        </div>

        <div className="search">
          <Search />
        </div>
        <Dropdown />
      </Header>
      <Layout className="app-wrapper">
        <Sider width={mobxData.width} className="app-sider">
          <SiderMenu />
        </Sider>
        <Layout className="app-wrapper-in">
          <Content className="app-content">
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default observer(App);

注意其中的：

<Outlet />

 4、src/sider-menu/index.tsx：添加导航NavLink

import React, { useState } from "react";
import { Button, Tooltip } from "antd";
import {
  HomeOutlined,
  FolderOutlined,
  AppstoreOutlined,
  ReadOutlined,
  TableOutlined,
  ProductOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons";
import { NavLink } from "react-router-dom";
import mobxData from "@/store/mobx-data";
import "./index.css";

const App: React.FC = () => {
  const [status, setStatus] = useState(false);

  const onChangeWidth = () => {
    const elements = document.querySelectorAll(".menu-item dd") as NodeListOf<
      HTMLElement
    >;

    if (status) {
      mobxData.setWidth(90);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "block";
      }
    } else {
      mobxData.setWidth(60);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "none";
      }
    }

    setStatus(!status);
  };

  return (
    <div className="menu">
      <div className="menu-item-all">
        <NavLink to="/">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="我的门户"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<HomeOutlined />} />
                </Tooltip>
              ) : (
                <HomeOutlined />
              )}
            </dt>
            <dd>我的门户</dd>
          </dl>
        </NavLink>
        <NavLink to="/timeline">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="文档中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<FolderOutlined />} />
                </Tooltip>
              ) : (
                <FolderOutlined />
              )}
            </dt>
            <dd>文档中心</dd>
          </dl>
        </NavLink>
        <NavLink to="/collapse">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="工作中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<AppstoreOutlined />} />
                </Tooltip>
              ) : (
                <AppstoreOutlined />
              )}
            </dt>
            <dd>工作中心</dd>
          </dl>
        </NavLink>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="知识中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<ReadOutlined />} />
              </Tooltip>
            ) : (
              <ReadOutlined />
            )}
          </dt>
          <dd>知识中心</dd>
        </dl>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="表格中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<TableOutlined />} />
              </Tooltip>
            ) : (
              <TableOutlined />
            )}
          </dt>
          <dd>表格中心</dd>
        </dl>
        <NavLink to="/app">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="应用"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<ProductOutlined />} />
                </Tooltip>
              ) : (
                <ProductOutlined />
              )}
            </dt>
            <dd>应用</dd>
          </dl>
        </NavLink>
      </div>

      <div className="collapse">
        <Tooltip placement="right" title={status ? "展开" : "收起"}>
          <Button
            type="text"
            icon={
              status ? (
                <MenuUnfoldOutlined onClick={onChangeWidth} />
              ) : (
                <MenuFoldOutlined onClick={onChangeWidth} />
              )
            }
            onClick={onChangeWidth}
          />
        </Tooltip>
      </div>
    </div>
  );
};

export default App;

注意其中的NavLink及css中添加的active属性

.menu a.active {
    color: #126ee3;
    border-right: 3px solid #126ee3;
    background: #dddee2;
}

5、路由鉴权：src/components/auth/index.tsx

  • 直接输入登录页，如果没有登录则进入登录页；如果已经登录，则直接进入首页；
  • 输入子页，如果没有登录，则跳转至登录页；如果已经登录，则直接进入该页；
import React, { useEffect } from "react";
// import { useNavigate } from "react-router-dom";
import { useLocation, Navigate } from "react-router-dom";

interface Props {
  children: React.ReactElement;
}

export default function Auth({ children }: Props) {
  const { pathname } = useLocation();
  const isAuth = localStorage.getItem("token");

  if (pathname === "/login") {
    if (isAuth && Number(isAuth) !== 1) {
      return <Navigate to="/" />;
    } else {
      return <>{children}</>; // 写成：return <Navigate to="/login" />会造成无限循环
    }
  }

  if (isAuth && Number(isAuth) !== 1) {
    return <>{children}</>;
  } else {
    return <Navigate to="/login" />;
  }
}

6、src/pages/404/index.tsx：错误页面

import React from "react"
import {Button} from "antd"

const App: React.FC = () => {
    return <div>
        <p>404，当前页面不存在！</p>
        <div><Button type="primary" onClick={()=>window.history.back()}>返回</Button></div>
    </div>
}

export default App;

二、使用标签创建：

  • 路由懒加载
  • 路由鉴权
  • 路由不存在则返回错误页面

 1、src/index.tsx：

import React from "react";
import ReactDOM from "react-dom/client";
import reportWebVitals from "@/reportWebVitals";
import "@/index.css";
import BaseRouter from "@/routes"

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <BaseRouter/>
);

// 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();

2、 src/routes/index.tsx：路由配置文件

import React, { lazy, Suspense } from "react";
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Auth from "@/components/auth/";

const App = lazy(() => import("@/App"));
const Home = lazy(() => import("@/pages/home/"));
const Collapse = lazy(() => import("@/pages/collapse/"));
const Timeline = lazy(() => import("@/pages/timeline/"));
const Application = lazy(() => import("@/pages/application/"));
const Login = lazy(() => import("@/pages/login/"));
const NotFound = lazy(() => import("@/pages/404/"));

const suspense = (Comp: JSX.Element) => (
  <Suspense fallback={<div>loading...</div>}>{Comp}</Suspense>
);

const BaseRouter = () => (
  <BrowserRouter>
    <Suspense fallback={<div>loading...</div>}>
      <Routes>
        <Route
          path="/"
          element={suspense(
            <Auth>
              <App />
            </Auth>
          )}
        >
          <Route index element={suspense(<Home />)}></Route>
          <Route path="collapse" element={suspense(<Collapse />)}></Route>
          <Route path="timeline" element={suspense(<Timeline />)}></Route>
          <Route path="app" element={suspense(<Application />)}></Route>
        </Route>
        <Route
          path="login"
          element={suspense(
            <Auth>
              <Login />
            </Auth>
          )}
        ></Route>
        <Route path="*" element={suspense(<NotFound />)}></Route>
      </Routes>
    </Suspense>
  </BrowserRouter>
);

export default BaseRouter;

3、src/App.tsx：首页，<Outlet/>为占位符

import React from "react";
import { Outlet } from "react-router-dom"
import { Layout } from "antd";
import Dropdown from "@/components/header/Dropdown";
import Search from "@/components/header/Search";
import SiderMenu from "@/components/sider-menu/";
import { observer } from "mobx-react";
import mobxData from "@/store/mobx-data";
import "@/App.css";

const { Header, Content, Sider } = Layout;

const App: React.FC = () => {

  return (
    <Layout className="app-layout">
      <Header className="app-header">
        <div className="app-logo">
          <img height="36" src={require("@/logo.png")} />
        </div>

        <div className="search">
          <Search />
        </div>
        <Dropdown />
      </Header>
      <Layout className="app-wrapper">
        <Sider width={mobxData.width} className="app-sider">
          <SiderMenu />
        </Sider>
        <Layout className="app-wrapper-in">
          <Content className="app-content">
            {/* {element} */}
            <Outlet/>
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default observer(App);

4、src/login/index.tsx：登录页

import React from "react";
import { useNavigate } from "react-router-dom";
import { Dropdown, Space, Button, Checkbox, Form, Input } from "antd";
import {
  DownloadOutlined,
  GlobalOutlined,
  DownOutlined,
  LockOutlined,
  UserOutlined
} from "@ant-design/icons";
import "./index.css";

const items1 = [
  {
    key: "1",
    label: "下载客户端"
  },
  {
    key: "2",
    label: "下载证书",
    children: [
      {
        key: "2-1",
        label: "下载应用证书"
      },
      {
        key: "2-2",
        label: "证书安装文档"
      }
    ]
  },
  {
    key: "3",
    label: "RESTFUL API"
  },
  {
    key: "4",
    label: "Web组件"
  }
];

const items2 = [
  {
    key: "5",
    label: "简体中文"
  },
  {
    key: "6",
    label: "繁体中文"
  },
  {
    key: "7",
    label: "ENGLISH"
  }
];

const App: React.FC = () => {
  let navigate = useNavigate();

  const onFinish = (values: string) => {
    console.log("Received values of form: ", values);
    localStorage.setItem("token", "2");
    navigate("/");
  };

  return (
    <div className="container">
      <div className="background-container"></div>
      <div className="wrapper">
        <div className="oem">
          <div className="oem-img"></div>
        </div>

        <div className="index">
          <div className="wrap-header-bar">
            <div className="app-index-bar" style={{ width: "504px" }}>
              <div
                className="app-index-bar-item"
                style={{ paddingRight: "16px" }}
              >
                <Dropdown
                  menu={{
                    items: items1
                  }}
                  trigger={["click"]}
                >
                  <a onClick={e => e.preventDefault()}>
                    <DownloadOutlined
                      style={{
                        fontSize: "14px",
                        cursor: "pointer",
                        marginRight: "5px"
                      }}
                    />
                    <Space>
                      下载
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
              </div>
              <div className="app-index-bar-item">
                <Dropdown
                  menu={{
                    items: items2
                  }}
                  trigger={["click"]}
                >
                  <a onClick={e => e.preventDefault()}>
                    <GlobalOutlined
                      style={{
                        fontSize: "14px",
                        cursor: "pointer",
                        marginRight: "5px"
                      }}
                    />
                    <Space>
                      简体中文
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
              </div>
            </div>
          </div>
          <div className="wrap-login">
            <div className="index-panel">
              <div className="logo-wrapper">
                <img
                  className="logo-image"
                  src={require("./images/logo.png")}
                />
              </div>
              <div className="title-wrapper">企业内容门户</div>
              <div className="signin-wrapper">
                <Form
                  name="normal_login"
                  className="login-form"
                  initialValues={{
                    remember: true
                  }}
                  onFinish={onFinish}
                >
                  <Form.Item
                    name="username"
                    rules={[
                      {
                        required: true,
                        message: "请输入账号!"
                      }
                    ]}
                  >
                    <Input
                      prefix={<UserOutlined className="site-form-item-icon" />}
                      placeholder="请输入账号"
                      className="login-form-input"
                    />
                  </Form.Item>
                  <Form.Item
                    name="password"
                    className="login-form-item"
                    rules={[
                      {
                        required: true,
                        message: "请输入密码!"
                      }
                    ]}
                  >
                    <Input
                      prefix={<LockOutlined className="site-form-item-icon" />}
                      type="password"
                      placeholder="请输入密码"
                      className="login-form-input"
                    />
                  </Form.Item>
                  <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                      <Checkbox>记住登录状态</Checkbox>
                    </Form.Item>
                  </Form.Item>

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      className="login-form-button"
                    >
                      登 录
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
          <div className="wrap-footer">
            <div>
              <div className="login-view-all">
                登录即表示同意<a>用户协议</a>
                <span>、 </span>
                <span>
                  <a>隐私政策</a>
                </span>
              </div>
            </div>
            <div className="split"></div>
            <div className="app-index-about" style={{ marginTop: "0px" }}>
              <span className="version-information">版本信息</span>
              <div className="app-index-about-row">
                <span className="app-index-separator">&nbsp;I&nbsp;</span>
                <a
                  className="app-index-record"
                  href="http://beian.miit.gov.cn"
                  target="_blank"
                >
                  沪ICP备09089247号-9
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

5、src/pages/404/index.tsx：错误页

import React from "react"
import {Button} from "antd"

const App: React.FC = () => {
    return <div>
        <p>404，当前页面不存在！</p>
        <div><Button type="primary" onClick={()=>window.history.back()}>返回</Button></div>
    </div>
}

export default App;

6、src/sider-menu/index.tsx：添加导航<NavLink></NavLink>

import React, { useState } from "react";
import { Button, Tooltip } from "antd";
import {
  HomeOutlined,
  FolderOutlined,
  AppstoreOutlined,
  ReadOutlined,
  TableOutlined,
  ProductOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons";
import { NavLink } from "react-router-dom";
import mobxData from "@/store/mobx-data";
import "./index.css";

const App: React.FC = () => {
  const [status, setStatus] = useState(false);

  const onChangeWidth = () => {
    const elements = document.querySelectorAll(".menu-item dd") as NodeListOf<
      HTMLElement
    >;

    if (status) {
      mobxData.setWidth(90);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "block";
      }
    } else {
      mobxData.setWidth(60);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "none";
      }
    }

    setStatus(!status);
  };

  return (
    <div className="menu">
      <div className="menu-item-all">
        <NavLink to="/">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="我的门户"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<HomeOutlined />} />
                </Tooltip>
              ) : (
                <HomeOutlined />
              )}
            </dt>
            <dd>我的门户</dd>
          </dl>
        </NavLink>
        <NavLink to="/timeline">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="文档中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<FolderOutlined />} />
                </Tooltip>
              ) : (
                <FolderOutlined />
              )}
            </dt>
            <dd>文档中心</dd>
          </dl>
        </NavLink>
        <NavLink to="/collapse">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="工作中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<AppstoreOutlined />} />
                </Tooltip>
              ) : (
                <AppstoreOutlined />
              )}
            </dt>
            <dd>工作中心</dd>
          </dl>
        </NavLink>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="知识中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<ReadOutlined />} />
              </Tooltip>
            ) : (
              <ReadOutlined />
            )}
          </dt>
          <dd>知识中心</dd>
        </dl>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="表格中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<TableOutlined />} />
              </Tooltip>
            ) : (
              <TableOutlined />
            )}
          </dt>
          <dd>表格中心</dd>
        </dl>
        <NavLink to="/app">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="应用"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<ProductOutlined />} />
                </Tooltip>
              ) : (
                <ProductOutlined />
              )}
            </dt>
            <dd>应用</dd>
          </dl>
        </NavLink>
      </div>

      <div className="collapse">
        <Tooltip placement="right" title={status ? "展开" : "收起"}>
          <Button
            type="text"
            icon={
              status ? (
                <MenuUnfoldOutlined onClick={onChangeWidth} />
              ) : (
                <MenuFoldOutlined onClick={onChangeWidth} />
              )
            }
            onClick={onChangeWidth}
          />
        </Tooltip>
      </div>
    </div>
  );
};

export default App;

7、路由鉴权：src/components/auth/index.tsx

import React from "react";
// import { useNavigate } from "react-router-dom";
import { useLocation, Navigate } from "react-router-dom";

interface Props {
  children: React.ReactElement;
}

export default function Auth({ children }: Props) {
  const {pathname} = useLocation();
  const isAuth = localStorage.getItem("token");

  if (pathname === "/login") {
    if (isAuth && Number(isAuth) !== 1) {
      return <Navigate to="/" />;
    } else {
      return <>{children}</>; // 写成：return <Navigate to="/login" />会造成无限循环
    }
  }

  if (isAuth && Number(isAuth) !== 1) {
    return <>{children}</>;
  } else {
    return <Navigate to="/login" />;
  }
}

三、使用useRoutes()创建：

  • 路由懒加载
  • 路由鉴权
  • 路由不存在则返回错误页面

1、src/index.tsx：使用BrowserRouter

import React from "react";
import ReactDOM from "react-dom/client";
import { BrowserRouter} from "react-router-dom";
import reportWebVitals from "@/reportWebVitals";
import App from "./App";
import "@/index.css";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);

root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

reportWebVitals();

2、src/App.tsx：使用useRoutes()

使用<Suspense></Suspense>是为了防止在使用路由懒加载时报错。

import React, { Suspense } from "react";
import { useRoutes } from "react-router-dom"
import routes from "@/routes/"
import "@/App.css";

const App: React.FC = () => {
  const myRoutes = useRoutes(routes);

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        {myRoutes}
      </Suspense>
    </div>
  );
};

export default App;

3、src/pages/Layout/index.tsx：首页，使用<Outlet />在其特定位置插入子页面

import React from "react";
import { Outlet } from "react-router-dom"
import { Layout } from "antd";
import Dropdown from "@/components/header/Dropdown";
import Search from "@/components/header/Search";
import SiderMenu from "@/components/sider-menu/";
import { observer } from "mobx-react";
import mobxData from "@/store/mobx-data";
import "@/App.css";

const { Header, Content, Sider } = Layout;

const App: React.FC = () => {
  return (
    <Layout className="app-layout">
      <Header className="app-header">
        <div className="app-logo">
          <img height="36" src={require("@/logo.png")} />
        </div>

        <div className="search">
          <Search />
        </div>
        <Dropdown />
      </Header>
      <Layout className="app-wrapper">
        <Sider width={mobxData.width} className="app-sider">
          <SiderMenu />
        </Sider>
        <Layout className="app-wrapper-in">
          <Content className="app-content">
            <Outlet />
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
};

export default observer(App);

4、src/pages/login/index.tsx：登录页

import React from "react";
import { useNavigate } from "react-router-dom";
import { Dropdown, Space, Button, Checkbox, Form, Input } from "antd";
import {
  DownloadOutlined,
  GlobalOutlined,
  DownOutlined,
  LockOutlined,
  UserOutlined
} from "@ant-design/icons";
import "./index.css";

const items1 = [
  {
    key: "1",
    label: "下载客户端"
  },
  {
    key: "2",
    label: "下载证书",
    children: [
      {
        key: "2-1",
        label: "下载应用证书"
      },
      {
        key: "2-2",
        label: "证书安装文档"
      }
    ]
  },
  {
    key: "3",
    label: "RESTFUL API"
  },
  {
    key: "4",
    label: "Web组件"
  }
];

const items2 = [
  {
    key: "5",
    label: "简体中文"
  },
  {
    key: "6",
    label: "繁体中文"
  },
  {
    key: "7",
    label: "ENGLISH"
  }
];

const App: React.FC = () => {
  let navigate = useNavigate();

  const onFinish = (values: string) => {
    console.log("Received values of form: ", values);
    localStorage.setItem("token", "2");
    navigate("/");
  };

  return (
    <div className="container">
      <div className="background-container"></div>
      <div className="wrapper">
        <div className="oem">
          <div className="oem-img"></div>
        </div>

        <div className="index">
          <div className="wrap-header-bar">
            <div className="app-index-bar" style={{ width: "504px" }}>
              <div
                className="app-index-bar-item"
                style={{ paddingRight: "16px" }}
              >
                <Dropdown
                  menu={{
                    items: items1
                  }}
                  trigger={["click"]}
                >
                  <a onClick={e => e.preventDefault()}>
                    <DownloadOutlined
                      style={{
                        fontSize: "14px",
                        cursor: "pointer",
                        marginRight: "5px"
                      }}
                    />
                    <Space>
                      下载
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
              </div>
              <div className="app-index-bar-item">
                <Dropdown
                  menu={{
                    items: items2
                  }}
                  trigger={["click"]}
                >
                  <a onClick={e => e.preventDefault()}>
                    <GlobalOutlined
                      style={{
                        fontSize: "14px",
                        cursor: "pointer",
                        marginRight: "5px"
                      }}
                    />
                    <Space>
                      简体中文
                      <DownOutlined />
                    </Space>
                  </a>
                </Dropdown>
              </div>
            </div>
          </div>
          <div className="wrap-login">
            <div className="index-panel">
              <div className="logo-wrapper">
                <img
                  className="logo-image"
                  src={require("./images/logo.png")}
                />
              </div>
              <div className="title-wrapper">企业内容门户</div>
              <div className="signin-wrapper">
                <Form
                  name="normal_login"
                  className="login-form"
                  initialValues={{
                    remember: true
                  }}
                  onFinish={onFinish}
                >
                  <Form.Item
                    name="username"
                    rules={[
                      {
                        required: true,
                        message: "请输入账号!"
                      }
                    ]}
                  >
                    <Input
                      prefix={<UserOutlined className="site-form-item-icon" />}
                      placeholder="请输入账号"
                      className="login-form-input"
                    />
                  </Form.Item>
                  <Form.Item
                    name="password"
                    className="login-form-item"
                    rules={[
                      {
                        required: true,
                        message: "请输入密码!"
                      }
                    ]}
                  >
                    <Input
                      prefix={<LockOutlined className="site-form-item-icon" />}
                      type="password"
                      placeholder="请输入密码"
                      className="login-form-input"
                    />
                  </Form.Item>
                  <Form.Item>
                    <Form.Item name="remember" valuePropName="checked" noStyle>
                      <Checkbox>记住登录状态</Checkbox>
                    </Form.Item>
                  </Form.Item>

                  <Form.Item>
                    <Button
                      type="primary"
                      htmlType="submit"
                      className="login-form-button"
                    >
                      登 录
                    </Button>
                  </Form.Item>
                </Form>
              </div>
            </div>
          </div>
          <div className="wrap-footer">
            <div>
              <div className="login-view-all">
                登录即表示同意<a>用户协议</a>
                <span>、 </span>
                <span>
                  <a>隐私政策</a>
                </span>
              </div>
            </div>
            <div className="split"></div>
            <div className="app-index-about" style={{ marginTop: "0px" }}>
              <span className="version-information">版本信息</span>
              <div className="app-index-about-row">
                <span className="app-index-separator">&nbsp;I&nbsp;</span>
                <a
                  className="app-index-record"
                  href="http://beian.miit.gov.cn"
                  target="_blank"
                >
                  沪ICP备09089247号-9
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default App;

 5、src/pages/404/index.tsx：错误页

import React from "react"
import {Button} from "antd"

const App: React.FC = () => {
    return <div>
        <p>404，当前页面不存在！</p>
        <div><Button type="primary" onClick={()=>window.history.back()}>返回</Button></div>
    </div>
}

export default App;

6、components/sider-menu/index.tsx：导航组件，使用<NavLink></NavLink>

import React, { useState } from "react";
import { Button, Tooltip } from "antd";
import {
  HomeOutlined,
  FolderOutlined,
  AppstoreOutlined,
  ReadOutlined,
  TableOutlined,
  ProductOutlined,
  MenuFoldOutlined,
  MenuUnfoldOutlined
} from "@ant-design/icons";
import { NavLink } from "react-router-dom";
import mobxData from "@/store/mobx-data";
import "./index.css";

const App: React.FC = () => {
  const [status, setStatus] = useState(false);

  const onChangeWidth = () => {
    const elements = document.querySelectorAll(".menu-item dd") as NodeListOf<
      HTMLElement
    >;

    if (status) {
      mobxData.setWidth(90);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "block";
      }
    } else {
      mobxData.setWidth(60);

      for (let i = 0; i < elements.length; i++) {
        (elements[i].style as any).display = "none";
      }
    }

    setStatus(!status);
  };

  return (
    <div className="menu">
      <div className="menu-item-all">
        <NavLink to="/">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="我的门户"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<HomeOutlined />} />
                </Tooltip>
              ) : (
                <HomeOutlined />
              )}
            </dt>
            <dd>我的门户</dd>
          </dl>
        </NavLink>
        <NavLink to="/timeline">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="文档中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<FolderOutlined />} />
                </Tooltip>
              ) : (
                <FolderOutlined />
              )}
            </dt>
            <dd>文档中心</dd>
          </dl>
        </NavLink>
        <NavLink to="/collapse">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="工作中心"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<AppstoreOutlined />} />
                </Tooltip>
              ) : (
                <AppstoreOutlined />
              )}
            </dt>
            <dd>工作中心</dd>
          </dl>
        </NavLink>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="知识中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<ReadOutlined />} />
              </Tooltip>
            ) : (
              <ReadOutlined />
            )}
          </dt>
          <dd>知识中心</dd>
        </dl>
        <dl className="menu-item">
          <dt>
            {status ? (
              <Tooltip
                placement="right"
                title="表格中心"
                className="menu-tooltip"
              >
                <Button type="text" icon={<TableOutlined />} />
              </Tooltip>
            ) : (
              <TableOutlined />
            )}
          </dt>
          <dd>表格中心</dd>
        </dl>
        <NavLink to="/app">
          <dl className="menu-item">
            <dt>
              {status ? (
                <Tooltip
                  placement="right"
                  title="应用"
                  className="menu-tooltip"
                >
                  <Button type="text" icon={<ProductOutlined />} />
                </Tooltip>
              ) : (
                <ProductOutlined />
              )}
            </dt>
            <dd>应用</dd>
          </dl>
        </NavLink>
      </div>

      <div className="collapse">
        <Tooltip placement="right" title={status ? "展开" : "收起"}>
          <Button
            type="text"
            icon={
              status ? (
                <MenuUnfoldOutlined onClick={onChangeWidth} />
              ) : (
                <MenuFoldOutlined onClick={onChangeWidth} />
              )
            }
            onClick={onChangeWidth}
          />
        </Tooltip>
      </div>
    </div>
  );
};

export default App;

7、/src/routes/index.tsx：路由文件，主要是三个页面：首页（及子页面）、登录页、错误页

使用<Suspense></Suspense>是为了防止在使用路由懒加载时报错及防止页面切换时页面抖动。

import React, { Suspense, lazy } from "react";
import Auth from "@/components/auth";
import Layout from "@/Layout"
import Home from "@/pages/home/";
 
const Collapse = lazy(() => import("@/pages/collapse/"));
const Timeline = lazy(() => import("@/pages/timeline/"));
const Application = lazy(() => import("@/pages/application/"));
const Login = lazy(() => import("@/pages/login/"));
const NotFound = lazy(()=>import("@/pages/404/"))
 
const withLoadingComponent = (comp: JSX.Element) => (
  <Suspense fallback={<div>Loading...</div>}>{comp}</Suspense>
)
 
const routes = [
  {
    path: "/",
    element: <Layout />,
    children: [
      {
        index: true,
        element: withLoadingComponent(<Home />),
      },
      {
        path: "collapse",
        element: withLoadingComponent(<Auth><Collapse /></Auth>),
      },
      {
        path: "timeline",
        element: withLoadingComponent(<Auth><Timeline /></Auth>),
      },
      {
        path: "app",
        element: withLoadingComponent(<Auth><Application /></Auth>),
      }
    ]
  },
  {
    path: "/login",
    element: withLoadingComponent(<Auth><Login /></Auth>),
  },
  { path: '*', element: <NotFound /> },  
];
 
export default routes;

8、路由鉴权：src/components/auth/index.tsx

  • 直接输入登录页，如果没有登录则进入登录页；如果已经登录，则跳转至首页；
  • 输入子页，如果没有登录，则跳转至登录页；如果已经登录，则直接进入该页；
import React from "react";
// import { useNavigate } from "react-router-dom";
import { useLocation, Navigate } from "react-router-dom";

interface Props {
  children: React.ReactElement;
}

export default function Auth({ children }: Props) {
  const {pathname} = useLocation();
  const isAuth = localStorage.getItem("token");

  if (pathname === "/login") {
    if (isAuth && Number(isAuth) !== 1) {
      return <Navigate to="/" />;
    } else {
      return <>{children}</>; // 写成：return <Navigate to="/login" />会造成无限循环
    }
  }

  if (isAuth && Number(isAuth) !== 1) {
    return <>{children}</>;
  } else {
    return <Navigate to="/login" />;
  }
}

四、三种方法比较：

使用useRoutes()创建的方式比前两者多了一个页面：

import React, { Suspense } from "react";
import { useRoutes } from "react-router-dom"
import routes from "@/routes/"
import "@/App.css";

const App: React.FC = () => {
  const myRoutes = useRoutes(routes);

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        {myRoutes}
      </Suspense>
    </div>
  );
};

export default App;
duansamve
关注
专栏目录
react-router-v6:在此仓库中，我了解了React Router v6的一些基础知识
04-17
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： yarn start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 yarn test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 yarn build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 yarn eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从您的项目中删除单个生成依赖项。 相反，它将所有配置文件和传递性依赖项（webpa
「React进阶」react-router v6 通关指南
奇舞周刊
02-28 3075
一 前言 不知不觉 react-router 已经到了 v6 版本了，可能很多同学发现，v6相比之前的 v5 有着翻天覆地的变化，因为最近接触到了 React 的新项目，用到了 v6 版本...
react-router-dom v6中loader和路由守卫
最新发布
this_star的博客
08-27 314
react-router-dom v6中新增了几个属性，这里主要记录下loader。loader只在数据路由中生效。一般项目中使用createBrowserRouter创建路由。
React RouterV6
x1037490413的博客
04-04 2618
文章目录1.Router(V6)简介2.对比V53.用法详解3.1一级路由和多级路由3.2指定默认路由3.3路由重定向3.4 4043.5代码3.6路由嵌套（maizuo.com为例）4.声明式导航和编程式导航4.1声明式导航4.2编程式导航4.21query(URL Search传参 /detail?id=1000)4.22路由传参 (/detail/1000) 动态路由5.路由拦截6.路由模式7.withRouter/类组件跳转方法 1.Router(V6)简介 2.对比V5 3.用法详解 3.1
React router（v6）
m0_54476873的博客
11-20 2550
react router v6 详解，改变，用法，动态路由，默认路由，路由传参，react router hooks，嵌套路由，demo
react中函数组件使用v6路由
A_fork的博客
03-17 1323
在react中要是用react-router路由进行页面的跳转分为v5路由和v6路由 在有状态的组件也叫class类组件中大多数使用v5路由，而在无状态的组件也叫函数组件大多数是用v6路由，而现在市面上主流都是用的函数组件也就是v6路由。 这期咱们来讲一下函数组件中的v6路由的配置以及使用
React-Router(V6版本)
qq_45859670的博客
07-29 1740
安装react-router和eact-router-dom。
React router路由v6详解
好川的博客
10-16 5587
React router v6 路由Ⅰ、路由 v6 (两种形式)Ⅱ、 动态路由Ⅲ、路由重定向Ⅳ、路由跳转 (两种形式)Ⅴ、路由懒加载
React-router6
11-23
React Router v6 是其最新的版本，针对 React 18 和以上版本进行了优化，提供了更简洁的API设计和更好的性能。在这个版本中，主要关注点是模块化、代码分割和服务器端渲染的改进。以下是对React Router v6关键特性和...
React18 ReactRouter6 searchParams的所有方法
01-19
总结来说，React Router v6中的`useLocation`钩子让我们能够方便地访问和操作URL的searchParams，而Arco Design UI则提供了优雅的组件，帮助我们构建专业且美观的界面。结合两者，开发者可以高效地处理路由参数，...
react-router:react-router 中文文档
04-29
React Router Declarative routing for 文档 Packages 这个存储库是我们使用管理的monorepo。 这意味着我们实际上从相同的代码库发布了几个包到npm，包括: Package Version Docs Description React Router的核心 ...
React从react-router路由上做登陆验证控制的方法
08-27
React是一款流行的前端框架，react-router是React中的路由管理器。本文将介绍如何使用react-router实现登陆验证控制的方法。 一、什么是登陆验证？ 登陆验证是指在用户访问某个页面或资源之前，检查用户是否已经...
react-router v6详解
m0_52537576的博客
05-21 5896
react-routerv6简单介绍
react-router v6 通关指南
油墨香^-^的博客
02-14 479
不知不觉已经到了v6版本了，可能很多同学发现，v6相比之前的v5有着翻天覆地的变化，因为最近接触到了 React 的新项目，用到了v6版本的，亲身体验发现这还是我认识的router吗？从 api 到原理都有较大的改动，所以今天就和大家一起看一下新版路由的变化。如果是新项目，可以尝试新版本的Rouer，对于老项目，建议还是不要尝试升级 v6 ，升级的代价是会造成大量的功能改动，而且如果用到了依赖于router的第三方库，可能会让这些库失效。
react-router-dom V6 中文文档教程总结
热门推荐
xm1037782843的博客
10-21 1万+
react-router-dom v6 使用文档教程 react-router-dom
react-router-dom v6的路由懒加载形式，这里写了两种
qq_18470967的博客
11-29 1万+
前言 react-router-dom第6版本的这个Route改动的有点小大 之前的路由渲染方式是按照 // v6版本之前的 <Route path={router.path} component = { router.component } /> 在v6版本中，这个组件改动有点小大，把component这个属性改成了element，传进去的组件需要使用个尖括号包起来 // v6 <Route path={router.path} element = { <router.
2分钟学会react-router（v6版）
sirsu_lick的博客
12-13 213
虽然的官方文档洋洋洒洒万字有余，但实际上开发中常用的也就那么几个，掌握本文所述内容应对开发就足够了，接下来就跟着笔者一起来梳理一下吧。
一文搞定react-router-dom最新版V6路由的入门及使用
qq_38188228的博客
03-07 5022
本文主要以版本为主，旧版过多概念不介绍，想必诸位应该也知道该库是做什么用的 😅，主要引领大家入门了解 react-router-dom 的使用，快速上手最新React Router v6 版本。
react项目中createBrowserRouter的使用
Rainsonn的博客
11-05 705
注意，如果有children，也就是子路由，path的末尾需要加上"/*" ，子路由开头不需要加斜杠。为了方便全局配置，在src目录项新建一个router文件夹，文件夹里新建index.js。首先，安装react-router-dom（创建项目时并不会安装这个，需要手动安装）
react router v6特性
05-18
React Router v6是React Router的下一个版本，它包含了一些新特性和变化： 1. Hooks API：React Router v6使用了Hooks API，这使得它更加灵活和易于使用。 2. 统一了路由和组件：在React Router v6中，路由和组件是统一的，这意味着您可以在组件中直接定义路由。 3. 动态路由：React Router v6增加了动态路由的支持，这使得您可以更轻松地处理动态路由。 4. 新的导航方式：React Router v6引入了新的导航方式，包括`useNavigate`和`useLocation`。 5. 删除了`Switch`组件：在React Router v6中，`Switch`组件已被删除，取而代之的是`Routes`组件。 6. 改进了代码分离：React Router v6改进了代码分离，这使得您可以更好地控制代码的加载。 7. 新的错误处理方式：React Router v6引入了新的错误处理方式，这使得您可以更轻松地处理错误。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值