React-Router 6中如何给Route的element属性传入的组件传递props？

React Router v6 中element属性接收的是标准JSX元素，你可以像平时使用React组件一样直接挂载需要传递的props，不需要额外的特殊语法。 #

方法1：直接内联传递静态/动态props #

不管是固定值、父组件的state、自定义方法都可以直接绑定在组件上：

<Route path="/" element={<App />} >
    <Route 
        path="table" 
        element={
          <Table 
            pageSize={10} 
            showPagination={true} 
            tableData={yourBusinessData} 
            onRowClick={handleRowClick} 
          />
        } 
    />
</Route>

方法2：传递路由相关数据作为props #

如果你需要把路由参数、搜索参数这类路由自带数据作为props传递，可先在父组件调用对应的路由Hook拿到数据再绑定：

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

function RouterEntry() {
  const params = useParams();
  const [searchParams] = useSearchParams();
  const yourBusinessData = []; // 业务数据
  
  return (
    <Routes>
      <Route path="/" element={<App />} >
        <Route 
          path="table/:tableId" 
          element={
            <Table 
              tableId={params.tableId} 
              searchKeyword={searchParams.get('keyword')}
              tableData={yourBusinessData}
            />
          } 
        />
      </Route>
    </Routes>
  )
}

注意：不要给element属性传递函数返回组件的写法（比如element={() => <Table />}），这会导致组件每次路由切换时都重新挂载，出现状态丢失、性能下降的问题，直接传递JSX元素即可，动态props更新时组件会正常重渲染不会触发全量重新挂载。

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