React+TypeScript项目中react-router-dom路由配置问题求助

问题说明 #

在React+TypeScript项目里用react-router-dom配置路由，要求访问HomePage或Products页面时自动渲染Navigate导航栏组件，登录、注册这类页面则不渲染。之前把Navigate和页面组件塞数组里当element用，触发了警告，需要正确实现方式。

原错误代码 #

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";

//pages
import ErrorPage from "@/pages/ErrorPage";
import LoginPage from "@/pages/LoginPage";
import RegisterPage from "@/pages/RegisterPage";

import Navigate from "@/components/Navigate";
import HomePage from "@/pages/HomePage";
import Products from "@/pages/Products";


const element = createRoutesFromElements(
  <>
    <Route path="*" element={<ErrorPage />} />
    <Route path="/" element={<LoginPage />} />
    <Route path="/register" element={<RegisterPage />} />

    {/* 想让Homepage和Product组件自动加载Navigate */}
    <Route path="/homepage" element={[<Navigate />, <HomePage />]} />
    <Route path="/products" element={[<Navigate />, <Products />]} />
  </>
);

export const router = createBrowserRouter(element);

解决思路及方案 #

为啥之前的方法不行？ #

react-router-dom的Route组件element属性只能接受单个React元素，传数组不符合规则，所以会出警告。

方案1：封装带导航栏的布局组件 #

先写一个通用布局组件，把导航栏和页面内容组合起来，需要导航栏的页面用这个组件包裹就行：

// components/WithNavbar.tsx
import { ReactNode } from 'react';
import Navigate from './Navigate';

const WithNavbar = ({ children }: { children: ReactNode }) => {
  return (
    <>
      <Navigate />
      {children}
    </>
  );
};

export default WithNavbar;

然后修改路由配置：

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
} from "react-router-dom";

//pages
import ErrorPage from "@/pages/ErrorPage";
import LoginPage from "@/pages/LoginPage";
import RegisterPage from "@/pages/RegisterPage";

import WithNavbar from "@/components/WithNavbar";
import HomePage from "@/pages/HomePage";
import Products from "@/pages/Products";


const element = createRoutesFromElements(
  <>
    <Route path="*" element={<ErrorPage />} />
    <Route path="/" element={<LoginPage />} />
    <Route path="/register" element={<RegisterPage />} />

    <Route path="/homepage" element={<WithNavbar><HomePage /></WithNavbar>} />
    <Route path="/products" element={<WithNavbar><Products /></WithNavbar>} />
  </>
);

export const router = createBrowserRouter(element);

方案2：嵌套路由（更适合后续扩展） #

如果以后还有更多页面需要导航栏，用嵌套路由维护起来更方便：

import {
  createBrowserRouter,
  createRoutesFromElements,
  Route,
  Outlet,
} from "react-router-dom";

//pages
import ErrorPage from "@/pages/ErrorPage";
import LoginPage from "@/pages/LoginPage";
import RegisterPage from "@/pages/RegisterPage";

import Navigate from "@/components/Navigate";
import HomePage from "@/pages/HomePage";
import Products from "@/pages/Products";

// 带导航栏的布局，Outlet用来渲染子路由的内容
const NavbarLayout = () => {
  return (
    <>
      <Navigate />
      <Outlet />
    </>
  );
};

const element = createRoutesFromElements(
  <>
    <Route path="*" element={<ErrorPage />} />
    <Route path="/" element={<LoginPage />} />
    <Route path="/register" element={<RegisterPage />} />

    {/* 这个父路由下的所有子页面都会自动带上Navigate */}
    <Route element={<NavbarLayout />}>
      <Route path="/homepage" element={<HomePage />} />
      <Route path="/products" element={<Products />} />
    </Route>
  </>
);

export const router = createBrowserRouter(element);

内容的提问来源于stack exchange，提问作者BANXDEV