reactjs 在react中使用useParams钩子

ecr0jaav  于 2023-03-29  发布在  React
关注(0)|答案(2)|浏览(154)

我正在学习useParams钩子React。我有一个这样的URL,需要能够从中提取字母9。

http://localhost:3010/9/solution

我该怎么做呢?

bqf10yzr

bqf10yzr1#

我假设你使用的是react router,如果你像这样定义一个路由:

<Route path="/:id/about">
 <About />
</Route>

请注意,您使用:id符号定义路径,这意味着在这种特定情况下,id将是参数。

<Link to="/2/about">About</Link>

在你的组件中,在这个例子中是about组件,你可以像这样使用钩子:

function About() {
 const { id } = useParams();
 return (
  <div>
   <h2>Now showing post {id}</h2>
  </div>
 );
}

我有这个代码沙箱,如果你想检查结果https://codesandbox.io/s/react-router-basic-nv8pn

6jjcrrmo

6jjcrrmo2#

假设你正在使用react-router,那么你应该在你的React应用中使用Browser Router:https://reacttraining.com/react-router/web/api/BrowserRouter
然后声明一个路由如下:

<Route path="/{id}/solution" component={Component} />

然后在你的组件中你可以使用它:

const { id } = useParams();

相关问题