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;

并将您的路线设置为：

<Route path="/edit/:id">
  <EditPost />
</Route>

希望这对您有用。

Answer 2

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

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

或与钩子相同：

const EditPost = () => {
  let { id } = useParams();
  // ...
}

然后在路由器中可以像这样使用它：

<Router>
  <div>
    <Switch>
      <Route path="/blog/:slug" component={BlogPost} />
    </Switch>
  </div>
</Router>

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

2 个答案: