【前端】全栈开发05-增加路由和标签页动态标题

接上期，这次增加路由和标签页动态标题功能。

开始

增加路由就可以在点击菜单后在各个页面中进行跳转。这里使用的组件是react-router-dom。

以下是配置路由的步骤：

1. 安装组件

npm install react-router-dom

继续安装动态标题组件。动态标题就是显示在浏览器标签页上的标题，当点击菜单时，标题会随着更改。 这里使用的组件是 react-helmet-async。

npm install react-helmet-async

2. 修改src/app.tsx

function App() {
    return (
        <ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
            <HelmetProvider>
                <Router>
                    <Layout>
                        <Routes>
                            <Route path="/" element={<Dashboard/>}/>
                            <Route path="/sys/users" element={<User/>}/>
                            <Route path="/sys/roles" element={<Role/>}/>
                            <Route path="/sys/department" element={<Department/>}/>
                            <Route path="/sys/position" element={<Position/>}/>
                            <Route path="/sys/mail" element={<Index/>}/>
                            <Route path="/sys/log" element={<Log/>}/>
                            <Route path="/sys/login-log" element={<LoginLog/>}/>
                        </Routes>
                    </Layout>
                </Router>
            </HelmetProvider>
        </ThemeProvider>
    )
}

export default App

其中HelmetProvider是动态标题的配置。

3. 编写一个组件案例

这里就写一个User组件：用户管理。

在src下新建一个目录为page，再创建组件到src/page/system/user/index.tsx。

import {Helmet} from "react-helmet-async";
import {SidebarTrigger} from "@/components/ui/sidebar";
import {Separator} from "@/components/ui/separator";
import {
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    BreadcrumbList, BreadcrumbPage,
    BreadcrumbSeparator
} from "@/components/ui/breadcrumb";
import {NavActions} from "@/components/nav-actions";

const User = () => {
    return (
        <div>
            <Helmet>
                <title>用户管理</title>
            </Helmet>
            <header className="flex h-16 shrink-0 items-center gap-2 border-b px-4">
                <div className="flex flex-1 items-center gap-2 px-3">
                    <SidebarTrigger className="-ml-1"/>
                    <Separator orientation="vertical" className="mr-2 h-4"/>
                    <Breadcrumb>
                        <BreadcrumbList>
                            <BreadcrumbItem className="hidden md:block">
                                <BreadcrumbLink>
                                    系统管理
                                </BreadcrumbLink>
                            </BreadcrumbItem>
                            <BreadcrumbSeparator className="hidden md:block"/>
                            <BreadcrumbItem>
                                <BreadcrumbPage>用户管理</BreadcrumbPage>
                            </BreadcrumbItem>
                        </BreadcrumbList>
                    </Breadcrumb>
                </div>
                <div className="ml-auto px-3">
                    <NavActions/>
                </div>
            </header>
            <div className={'container'}>
                内容
            </div>
        </div>
    )
}

export default User

其中NavAction组件中管理的是页面右上角的操作按钮，比如暗黑模式切换，国际化切换等。

更多

全部代码可以到github仓库进行查看。代码仓库会持续更新迭代，感兴趣的可以star关注。

另外附带更多功能的系统体验地址也已上线，这是地址xryder.cn 。

账号密码是admin/admin123。

📬 联系方式

你可以通过这些方式跟我联系：

• Email: cutesimba@163.com
• B站: space.bilibili.com/412405219

感谢你在我的互联网角落停留片刻！ 💫