使用顶部导航栏反应路由

Question

我目前正在为我的应用程序设置 React 路由，并希望集成一个顶部导航栏。以下是我如何使用 createBrowserRouter 构建路由：

export const router = createBrowserRouter([
    {
        element: <><TopNavbar /> <Outlet/></>,
        children:[
            {
                path: "/",
                element: <Home />,
            },
            {
                path: "/login",
                element: <Login />,
            },
        ]
    },
]);

在此设置中，我在主路由器元素中包含了 TopNavbar 组件和 ，并为 Home 和 Login 定义了子路由。

我很好奇将顶部导航栏与 React 路由集成的最佳实践。我的方法被认为是一个好的做法，还是有更好的替代方案？

Answer 1

React 开发的最佳实践之一，尤其是在路由方面，是通过模块化代码来分离关注点。这不仅使您的应用程序更易于维护，而且对于项目的新开发人员或贡献者来说也更容易理解。以下是如何将这些原则应用到您的场景中：

1. 模块化路由：将路由逻辑拆分为自己的功能或组件。这可以让您的主应用程序保持整洁，并且可以轻松地动态调整路线，无论是由于用户状态或权限的变化。

2. 布局组件：转向使用布局组件，例如 AppLayout，它环绕您的页面。在此组件中包含页眉、页脚和主要内容。此设置阐明了您网站的结构，并使未来的布局更改变得轻而易举，而且不会扰乱您的路由设置。

3. Router Builder 策略： 依靠 RouterBuilder 功能进行路由设置。这种方法可以让您在一个地方组织您的路由定义，使您的代码更干净且更易于维护。

App.tsx：

const App = () => {
  const routes = useMemo(() => RouterBuilder(), []);

  return <RouterProvider router={createBrowserRouter(routes)} />;
};

应用程序.router.tsx：

import { Navigate } from 'react-router-dom';
import { RouteObject } from 'react-router-dom';
import LoginPage from './LoginPage';
import HomePage from './HomePage';
import AppLayout from './App.layout';

const RouterBuilder = () => {
  const generalRoutes: RouteObject[] = [
    {
      path: '/login',
      element: <LoginPage />,
    },
    {
      path: '/',
      element: <HomePage />,
    },
    {
      path: '*',
      element: <Navigate to="/" replace />,
    },
  ];

  const routes: RouteObject[] = [
    {
      element: <AppLayout />,
      children: generalRoutes,
    },
  ];

  return routes;
};

export default RouterBuilder;

应用程序.layout.tsx：

import React, { Suspense } from 'react';
import { Outlet } from 'react-router-dom';
import Header from '@/layout/Header';
import Footer from '@/layout/Footer';

const AppLayout = () => {
  return (
    <Suspense fallback={null}>
      <Header />
      <Outlet />
      <Footer />
    </Suspense>
  );
};

export default React.memo(AppLayout);

总而言之，您最初的路由方法直接在 React Router 设置中合并顶部导航栏是完全有效且实用的。但是，通过采用我提到的逻辑，您可以进一步增强应用程序的路由架构。这种方法简化了路线管理，集中定义，并有可能使未来的调整或扩展更加简单。