如何在React Router中创建带可选动态参数的路由？

要同时匹配 /home 和 /home/1 这类带可选动态ID参数的路由，不同技术栈的实现方式略有不同，以下是几种主流方案：

React Router（v6+） #

React Router v6 支持通过在参数后添加 ? 标记可选参数，单一路由即可覆盖两种路径模式：

import { Routes, Route, useParams } from 'react-router-dom';

function Home() {
  const { id } = useParams();
  return (
    <div>
      {id ? <p>当前选中ID：{id}</p> : <p>默认Home页面</p>}
    </div>
  );
}

function App() {
  return (
    <Routes>
      {/* :id? 表示id参数是可选的 */}
      <Route path="/home/:id?" element={<Home />} />
    </Routes>
  );
}

Vue Router（v4+） #

Vue Router 同样支持可选参数语法，在参数后追加 ? 即可实现需求：

<template>
  <div class="home-page">
    <p v-if="$route.params.id">当前ID：{{ $route.params.id }}</p>
    <p v-else>无ID参数的Home页面</p>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
// 也可通过route.params.id判断参数是否存在
</script>

// 路由配置文件
const routes = [
  {
    path: '/home/:id?',
    component: () => import('../views/Home.vue')
  }
];

Express（后端路由） #

Express 可直接使用可选参数语法简化配置，无需额外定义多条路由：

const express = require('express');
const app = express();

// 同时匹配/home和/home/xxx两种路径
app.get('/home/:id?', (req, res) => {
  const { id } = req.params;
  if (id) {
    res.status(200).send(`处理ID为${id}的请求`);
  } else {
    res.status(200).send('默认Home页面');
  }
});

app.listen(3000, () => {
  console.log('服务启动在3000端口');
});

额外优化建议 #

• 若需限制动态ID的格式（比如仅允许数字），可在参数后添加正则约束：
  • React Router：/home/:id(\\d+)?
  • Vue Router：/home/:id(\\d+)?
  • Express：/home/:id(\\d+)?
• 无需重复定义 /home 路由，带可选参数的路由规则已包含对无参数路径的匹配

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