React TypeScript版routes.ts与App.tsx路由实现求助

1. 定义路由类型约束 #

首先为路由数组定义TypeScript类型，明确每个路由项的结构，避免类型错误：

import type { ReactNode } from 'react';

// 自定义路由项类型，支持嵌套子路由
interface RouteItem {
  path: string;
  component: ReactNode;
  children?: RouteItem[];
}

2. 编写TypeScript版本的routes.ts #

将原JS代码转换为TS，给路由数组加上类型注解，并确保所有变量有明确类型：

import { ReactNode } from 'react';
import { Navigate } from 'react-router-dom';
// 导入你的组件（根据实际路径调整）
import HomeComponent from './components/HomeComponent';
import DashboardComponent from './components/DashboardComponent';
import OtherComponent from './components/OtherComponent';
import LoginComponent from './components/LoginComponent';
import RegisterComponent from './components/RegisterComponent';
import NotFoundComponent from './components/NotFoundComponent';

// 定义登录状态（实际业务中可从状态管理/localStorage获取）
const isLoggedIn: boolean = false;

interface RouteItem {
  path: string;
  component: ReactNode;
  children?: RouteItem[];
}

const routes: RouteItem[] = [
  {
    path: 'app',
    component: isLoggedIn ? <HomeComponent /> : <Navigate to="/login" />,
    children: [
      { path: '', component: <Navigate to="/dashboard" /> },
      { path: 'dashboard', component: <DashboardComponent /> },
      { path: 'other', component: <OtherComponent /> },
    ]
  },
  { path: 'login', component: <LoginComponent /> },
  { path: 'register', component: <RegisterComponent /> },
  { path: '**', component: <NotFoundComponent /> },
];

export default routes;

3. App.tsx中渲染路由 #

使用递归函数处理嵌套子路由，配合react-router-dom的Routes和Route组件完成渲染：

import { BrowserRouter, Route, Routes } from 'react-router-dom';
import routes from './routes';
import type { RouteItem } from './routes';

// 递归渲染路由（支持嵌套子路由）
const renderRoutes = (routeList: RouteItem[]) => {
  return routeList.map((route, index) => (
    <Route
      key={index}
      path={route.path}
      element={route.component}
    >
      {route.children && renderRoutes(route.children)}
    </Route>
  ));
};

function App() {
  return (
    <BrowserRouter>
      <Routes>
        {renderRoutes(routes)}
      </Routes>
    </BrowserRouter>
  );
}

export default App;

关键说明 #

• 类型约束：通过RouteItem接口确保每个路由项的属性类型符合预期，TS会在编译阶段捕获类型错误
• 条件渲染：isLoggedIn明确为boolean类型，TS自动校验条件分支返回的组件均属于ReactNode类型，符合component属性要求
• 嵌套路由：递归函数renderRoutes处理子路由，保证多层级路由结构正确渲染
• 适配react-router-dom v6：使用Routes包裹Route是v6版本的标准写法，如果使用v5版本，需替换为Switch组件并调整对应API

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