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

Question

我正在尝试通过它的 id 编辑 post，我想将 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

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

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 中的路由器参数？

How can I access router params in JSX?

javascript

router

reactjs

react-router