React Router v6 如何为useRoutes配置basename并实现根路径重定向

React Router v6 正式版已经移除了useRoutes方法的第二个配置参数，basename相关配置统一收敛到外层路由容器，你可以通过以下两种方案实现需求：

方案一：使用官方原生basename配置（推荐） #

步骤1：在外层路由容器配置basename #

直接修改项目入口处的<BrowserRouter>（或<HashRouter>）组件，添加basename属性：

// 入口文件 index.jsx / main.jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App'; // 你使用useRoutes的业务组件

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  {/* 配置basename为/ui，所有路由自动拼接此前缀 */}
  <BrowserRouter basename="/ui">
    <App />
  </BrowserRouter>
);

配置完成后你原有useRoutes内的路由规则不需要做任何修改，框架会自动为所有路由拼接/ui前缀：

• 原规则path: '/' 对应实际访问路径 /ui/
• 原规则path: 'users' 对应实际访问路径 /ui/users
• 原规则path: 'users/:id' 对应实际访问路径 /ui/users/:id

步骤2：实现根路径/重定向到/ui/ #

由于basename的作用范围仅在/ui路径下，访问根路径/时不会进入React Router的匹配逻辑，根据场景选择处理方式：

• 生产环境部署：直接在Nginx、CDN等服务端配置层添加301重定向规则，将/跳转至/ui/，性能最优
• 纯前端实现：可以选择下方的方案二，不需要依赖外层basename配置，完全通过路由规则实现需求

方案二：手动封装父级路由实现前缀（纯前端无依赖） #

如果你不想修改外层路由容器配置，也可以直接给现有路由套一层/ui的父路由，同时添加根路径重定向规则，原有子路由配置不需要做任何调整：

import { useRoutes, Navigate } from 'react-router-dom';

function App() {
  let routes = useRoutes([
    // 根路径访问直接重定向到/ui
    {
      path: '/',
      element: <Navigate to="/ui" replace />
    },
    // 统一带/ui前缀的父路由层
    {
      path: '/ui',
      children: [
        // 此处直接粘贴你原有所有路由配置即可
        { path: '/', element: <Home /> },
        {
          path: 'users',
          element: <Users />,
          children: [
            { path: '/', element: <UsersIndex /> },
            { path: ':id', element: <UserProfile /> },
            { path: 'me', element: <OwnUserProfile /> },
          ]
        }
      ]
    }
  ]);

  return routes;
}

该方案不需要修改项目外层任何配置，完全靠路由规则实现需求，同时自动支持访问/跳转到/ui/，所有路由自动携带/ui前缀。

内容的提问来源于stack exchange，提问作者Burak Özdemir