如何在JSX中获取路由参数？如何将路由ID传递给EditPost组件？

1. 如何在JSX中访问路由参数？ #

从你的代码来看应该是用的React Router v5版本，我主要针对这个版本讲解，顺带提下v6的差异：

• 函数组件（推荐写法）：用useParams钩子就能轻松拿到路由参数，直接在组件里调用即可：

  import { useParams } from 'react-router-dom';
  
  function YourComponent() {
    const { id } = useParams(); // 这里的id对应路由路径里的`:id`
    return <div>当前路由ID：{id}</div>;
  }
  

• 类组件：类组件没法直接用钩子，得通过props.match.params获取参数：

  class YourComponent extends React.Component {
    render() {
      const { id } = this.props.match.params;
      return <div>当前路由ID：{id}</div>;
    }
  }
  

要是用的React Router v6，useParams依然可用，只是Route的外层容器从Switch改成了Routes，写法略有不同，但核心逻辑一致。

2. 如何将路由ID作为props传递给EditPost组件？ #

针对你的代码，有几种简单可行的方案：

方案一：通过Route的render属性传递参数 #

把Route的写法改成用render函数，这样你能拿到路由的match对象，然后把id作为指定props传给EditPost：

render() {
  return (
    <Router>
      <Switch>
        <Route 
          path="/edit/:id" 
          render={(routeProps) => (
            <EditPost 
              index={routeProps.match.params.id} 
              {...routeProps} {/* 可选：把history、location等路由相关props也一并传递 */}
            />
          )} 
        />
      </Switch>
    </Router>
  );
}

这样EditPost组件就能通过props.index（函数组件）或者this.props.index（类组件）拿到这个ID了。

方案二：让EditPost直接从路由props中获取ID #

如果你不想额外定义index这个props，也可以让组件直接读取路由参数：

• 如果是类组件：

  class EditPost extends React.Component {
    render() {
      const postId = this.props.match.params.id;
      return <div>正在编辑ID为{postId}的文章</div>;
    }
  }
  

  这种情况下，你的Route可以保持原来的写法：<Route path="/edit/:id"><EditPost /></Route>，因为Route会自动把match、history这些路由相关的props传递给直接嵌套的组件。

• 如果是函数组件：

  import { useParams } from 'react-router-dom';
  
  function EditPost() {
    const { id } = useParams();
    return <div>正在编辑ID为{id}的文章</div>;
  }
  

  这种写法更简洁，不需要在Route里做任何额外配置，组件自己通过钩子就能拿到参数，也是现在比较推荐的方式。

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