React路由配置：访问/counter时如何向Counter组件传递props？

嘿，我来帮你搞定React路由传递props的问题！看你当前的路由配置用的是React Router v5的写法（依赖component属性），我给你分享几种直接可用的方法，结合你的代码一一说明：

方法1：用render属性替代component（最推荐） #

这是最灵活直接的方式，把原来的component换成render，在回调里直接渲染Counter组件并传入自定义props。修改你的route.tsx代码如下：

export const routes = () => (
  <Layout>
    <Route exact path='/' component={ Home } />
    {/* 替换成render属性，直接传自定义props */}
    <Route path='/counter' render={() => <Counter initialCount={5} pageTitle="我的计数器" />} />
    <Route path='/fetchdata' component={ FetchData } />
  </Layout>
);

这样访问/counter时，Counter组件就能拿到initialCount和pageTitle这两个自定义props了。如果还需要路由自带的属性（比如match、location、history），可以在render回调里接收参数并解构传递：

<Route path='/counter' render={(routeProps) => <Counter {...routeProps} initialCount={5} />} />

这样Counter既能拿到你自定义的props，也能获取路由相关的核心属性。

方法2：通过children属性传递 #

如果你需要在路由匹配时做额外判断，或者希望组件始终渲染但仅在匹配时传props，可以用children属性：

export const routes = () => (
  <Layout>
    <Route exact path='/' component={ Home } />
    <Route path='/counter'>
      {/* 只有路由匹配时才渲染并传props */}
      {({ match }) => match && <Counter initialCount={3} />}
    </Route>
    <Route path='/fetchdata' component={ FetchData } />
  </Layout>
);

这种方式的灵活性更高，适合有特殊渲染逻辑的场景。

方法3：通过URL动态参数传递 #

如果你的props是来自URL中的动态值（比如/counter/10这样的路径），可以先在路由里定义参数，再在Counter组件中读取：
首先修改路由配置：

<Route path='/counter/:initialCount' component={Counter} />

然后在Counter组件中获取参数：

const Counter = (props) => {
  // 把URL参数转成数字类型
  const initialCount = parseInt(props.match.params.initialCount, 10);
  
  return (
    <div>
      <h1>初始值：{initialCount}</h1>
      {/* 组件其他内容 */}
    </div>
  );
};

这种方式适合传递和URL强关联的动态数据。

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