如何在React Router中设置路由参数默认值？避免额外重定向

可以直接在路由配置里通过loader函数结合重定向实现你的需求，不需要在组件里写额外的跳转逻辑，具体实现如下：

1. 先写一个获取当前日期的工具函数 #

const getCurrentDate = () => {
  const today = new Date();
  // 格式化为YYYY-MM-DD的标准日期格式
  return today.toISOString().split('T')[0];
};

2. 修改路由配置 #

利用createBrowserRouter的路由loader特性，在路由层面处理无参数的情况：

import { createBrowserRouter, Route, redirect } from 'react-router-dom';
// 导入你的组件：AdminLayout、SchedulePage

const router = createBrowserRouter([
  {
    path: '/admin',
    element: <AdminLayout />,
    children: [
      // 处理 /admin/schedule 和 /admin/schedule/:date
      {
        path: 'schedule/:date?',
        element: <SchedulePage />,
        loader: ({ params }) => {
          // 当没有传入date参数时，自动重定向到带当前日期的路径
          if (!params.date) {
            return redirect(`/admin/schedule/${getCurrentDate()}`);
          }
          // 有参数时正常返回（如果需要加载数据可以在这里处理）
          return null;
        },
      },
      // 处理访问 /admin 根路径的情况，直接跳转到带当前日期的schedule页面
      {
        index: true,
        loader: () => redirect(`/admin/schedule/${getCurrentDate()}`),
      },
    ],
  },
]);

可选方案：保持URL不变，仅使用默认参数 #

如果不想修改URL（即访问/admin/schedule时仍保持该路径，但渲染当前日期的内容），可以去掉loader的重定向逻辑，直接在组件内处理：

// SchedulePage组件内部
import { useParams } from 'react-router-dom';

const SchedulePage = () => {
  const { date } = useParams();
  // 没有date参数时，使用当前日期作为默认值
  const targetDate = date || getCurrentDate();

  // 后续用targetDate渲染页面内容
  return <div>显示{targetDate}的日程</div>;
};

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