如何在JSX中访问路由器参数？

Question

正在尝试通过其ID编辑帖子，我想将ID作为道具传递给EditPost组件，我该如何处理？

  render() {
    return (
      <Router>
      <Switch >
        <Route path="/edit/:id">
          <EditPost index={/*what do I do here?*/} />
        </Route>
      </Switch>
      </Router>
    );
  }

Answer 1

在EditPost组件中，您可以这样操作：

import { useParams } from "react-router-dom";

const EditPost = () => {
  const params = useParams();

  return <p>Your Post ID is: {params.id}</p>  
}

export default EditPost;
并将您的路线设为：

Answer 2

如果使用类组件编写组件，则可以使用下一种方法。这是组件

const EditPost = ({ match }) => {
  let { id } = match.params
  // ...
}