react-router-dom v6中如何给路由匹配的组件传递自定义props

核心问题 #

你现有路由匹配逻辑完全符合React Router v6规范，无法复现原有逻辑的根因是：React渲染同类型组件时默认复用实例，切换路由时Calculator组件没有销毁重建，内部状态保留了上一次的旧值，新传入的props没有触发状态重置。

你当前场景不需要使用useNavigate，Link已经能满足点击切换的需求，useNavigate仅用于编程式跳转场景（如表单提交后跳转）。

最小侵入适配方案（无需修改Calculator内部代码） #

仅需修改CalculatorPage.tsx，给每个路由下的Calculator组件添加唯一key属性即可，React会根据key判断是否需要销毁重建组件，完全适配现有架构：

import Calculator from "../components/Calculator";
import { Route, Routes, Navigate } from "react-router";
import { Link } from "react-router-dom";

import { FlowrateCalc } from "../calc/calculators/FlowrateCalc";
import { ValveKvsCalc } from "../calc/calculators/ValveKvsCalc";
import { AccelerationCalc } from "../calc/calculators/AccelerationCalc";

export default function CalculatorPage() {
  return (
    <div>
      <Routes>
        {/* 可选配置：打开/calculator时默认跳转到flow计算器 */}
        <Route index element={<Navigate to="flow" replace />} />
        <Route
          path="flow"
          element={<Calculator key="flow" {...FlowrateCalc} />}
        />
        <Route
          path="kvs"
          element={<Calculator key="kvs" {...ValveKvsCalc} />}
        />
        <Route
          path="acceleration"
          element={<Calculator key="acceleration" {...AccelerationCalc} />}
        />
      </Routes>
      
      <Link to="flow">
        <button style={{ color: "green" }}>flow</button>
      </Link>
      <Link to="kvs">
        <button style={{ color: "red" }}>kvs</button>
      </Link>
      <Link to="acceleration">
        <button style={{ color: "blue" }}>acceleration</button>
      </Link>
    </div>
  );
}

其余文件（Main.tsx、App.tsx、Index.tsx）无需任何修改，完全符合React Router v6使用规范。

性能优化可选方案（无需重建组件） #

如果希望切换计算器时复用组件实例提升性能，可以修改Calculator内部代码，监听props变化重置状态：

// Calculator组件内部修改示例
import { useEffect } from 'react'

export default function Calculator(props) {
  // 假设你原有的初始化状态逻辑为initState
  useEffect(() => {
    // 传入的props变化时重新初始化状态
    initState(props)
  }, [props])

  // 原有组件逻辑保持不变
}

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