后端管理系统的多页签功能的干货指南

前端

2023-08-22 03:22:08

使用 React-Router v6 构建多页签应用程序

简介

多页签功能在后台管理系统和网络应用程序中非常常见，允许用户在同一窗口中打开多个页面并轻松切换。本文将指导你使用 React-Router v6 轻松构建一个多页签应用程序，包括：

准备工作
路由构建
页面组件创建
多页签导航添加
项目运行和验证

准备工作

React 18+
react-router-dom@6
文本编辑器（如 Visual Studio Code）
终端窗口（如 Git Bash）

路由构建

在 App.js 文件中：

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

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/contact" element={<Contact />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

页面组件创建

在 Home.js 、About.js 和 Contact.js 文件中：

// Home.js
import { useEffect } from "react";

const Home = () => {
  useEffect(() => {
    document.title = "Home";
  }, []);

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

export default Home;

// About.js
import { useEffect } from "react";

const About = () => {
  useEffect(() => {
    document.title = "About";
  }, []);

  return (
    <div>
      <h1>About</h1>
    </div>
  );
};

export default About;

// Contact.js
import { useEffect } from "react";

const Contact = () => {
  useEffect(() => {
    document.title = "Contact";
  }, []);

  return (
    <div>
      <h1>Contact</h1>
    </div>
  );
};

export default Contact;

多页签导航添加

在 App.js 文件中，在之前添加：

<ul className="nav">
  <li><Link to="/">Home</Link></li>
  <li><Link to="/about">About</Link></li>
  <li><Link to="/contact">Contact</Link></li>
</ul>