React同一路由下根据不同路径参数渲染多个组件的实现方案

1. 实现原理 #

你当前使用的带动态参数/:tool的路由本身就支持这个需求，不需要为每个工具单独定义路由，只需要加一层通用的工具容器组件，根据路由参数动态匹配要渲染的组件即可。

2. 传参方法 #

你可以选择两种方式传递工具标识：

2.1 URL 动态参数传递（推荐，支持页面刷新保留状态） #

直接将工具的唯一标识拼接在路径中，对应你路由定义里的:tool参数：

// 示例：选择JSON格式化工具时的Link写法
<Link to={`/webenv/${当前环境ID}/tools/json-formatter`}>
  JSON格式化工具
</Link>

2.2 state 隐式传参（适合传递不希望暴露在URL中的数据） #

如果需要传递额外的配置数据，不用拼接在URL里，可以用to的对象写法：

<Link
  to={{
    pathname: `/webenv/${envId}/tools/base64-converter`,
    state: {
      componentName: 'Base64Converter',
      defaultMode: 'encode'
    }
  }}
>
  Base64转换工具
</Link>

3. 侧接收参数并动态渲染组件 #

首先调整你的Route定义，将component指向通用的工具容器组件，而不是单个工具组件：

// 原写法错误，调整后如下
<Route path="/webenv/:webenv/tools/:tool" component={ToolContainer} />

3.1 定义工具组件映射表 #

提前建立工具标识和组件的映射关系，避免大量if/else判断，后续新增工具只需要加一行映射即可：

// 提前导入所有工具组件，工具很多的话可以用React.lazy做动态导入优化
import JsonFormatter from './tools/JsonFormatter'
import Base64Converter from './tools/Base64Converter'
import UrlEncoder from './tools/UrlEncoder'
import NotFoundTool from './tools/NotFoundTool'

// key对应路由中:tool的参数值，value对应要渲染的组件
const TOOL_COMPONENT_MAP = {
  'json-formatter': JsonFormatter,
  'base64-converter': Base64Converter,
  'url-encoder': UrlEncoder
}

3.2 实现通用容器组件 #

React Router V5 写法：

function ToolContainer(props) {
  // 取路由动态参数
  const { webenv, tool } = props.match.params
  // 取Link传递的state数据
  const extraConfig = props.location.state
  // 匹配对应组件，匹配不到用兜底组件
  const TargetTool = TOOL_COMPONENT_MAP[tool] || NotFoundTool

  // 把参数透传给目标工具组件
  return <TargetTool webenv={webenv} {...extraConfig} />
}

React Router V6 写法：

import { useParams, useLocation } from 'react-router-dom'

function ToolContainer() {
  const { webenv, tool } = useParams()
  const { state: extraConfig } = useLocation()
  const TargetTool = TOOL_COMPONENT_MAP[tool] || NotFoundTool

  return <TargetTool webenv={webenv} {...extraConfig} />
}

4. 优化建议 #

如果工具数量较多，可使用React动态导入减少首屏体积：

const TOOL_COMPONENT_MAP = {
  'json-formatter': React.lazy(() => import('./tools/JsonFormatter')),
  'base64-converter': React.lazy(() => import('./tools/Base64Converter'))
}

// 渲染时用Suspense包裹
return (
  <React.Suspense fallback={<div>工具加载中...</div>}>
    <TargetTool webenv={webenv} {...extraConfig} />
  </React.Suspense>
)

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