如何在React Router Dom中为同一组件配置多路径？

在react-router-dom v6及以后版本中，Route组件的path属性不再支持传入字符串数组，要实现创建/编辑组件复用的需求，你可以通过以下方式解决：

方法一：拆分多个Route指向同一组件 #

直接为每个路径单独定义Route，但都渲染ArenaForm组件，这是最直观且符合v6规范的做法：

return (
    <>
      <NavBar />
      <Container style={{marginTop: '7em'}}>
        <Routes>
          <Route path='/' Component={HomePage}/>                
          <Route path='/arenas' Component={ArenaDashboard}/>    
          <Route path='/arenas/:id' Component={ArenaDetails}/>    
          {/* 拆分两个Route，复用同一个组件 */}
          <Route path='/createArena' Component={ArenaForm} />
          <Route path='/manage/:id' Component={ArenaForm} />
        </Routes>
      </Container>
    </>
);

在组件内区分创建/编辑模式 #

在ArenaForm组件中，通过useParams钩子获取路径参数，判断是否存在id来区分创建或编辑场景：

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

function ArenaForm() {
  const { id } = useParams();
  // 有id则为编辑模式，无id为创建模式
  const isEditing = !!id;

  useEffect(() => {
    if (isEditing) {
      // 编辑模式：根据id拉取对应数据
      fetchArenaById(id);
    } else {
      // 创建模式：初始化空表单
      initEmptyForm();
    }
  }, [isEditing, id]);

  return (
    <div>
      <h1>{isEditing ? '编辑竞技场' : '创建竞技场'}</h1>
      {/* 表单内容 */}
    </div>
  );
}

可选方案：调整路径规则使用可选参数（适合路径重构场景） #

如果可以调整现有路径规划，可利用路由可选参数实现单路径复用：

<Route path='/arena/:id?' Component={ArenaForm} />

此时访问/arena时id为undefined（创建模式），访问/arena/123时id为123（编辑模式），这种方式适合新项目或允许路径重构的场景。

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