我正在学习useParams钩子React。我有一个这样的URL,需要能够从中提取字母9。
useParams
http://localhost:3010/9/solution
我该怎么做呢?
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
6jjcrrmo2#
假设你正在使用react-router,那么你应该在你的React应用中使用Browser Router:https://reacttraining.com/react-router/web/api/BrowserRouter然后声明一个路由如下:
react-router
<Route path="/{id}/solution" component={Component} />
然后在你的组件中你可以使用它:
const { id } = useParams();
2条答案
按热度按时间bqf10yzr1#
我假设你使用的是react router,如果你像这样定义一个路由:
请注意,您使用:id符号定义路径,这意味着在这种特定情况下,id将是参数。
在你的组件中,在这个例子中是about组件,你可以像这样使用钩子:
我有这个代码沙箱,如果你想检查结果https://codesandbox.io/s/react-router-basic-nv8pn
6jjcrrmo2#
假设你正在使用
react-router
,那么你应该在你的React应用中使用Browser Router:https://reacttraining.com/react-router/web/api/BrowserRouter然后声明一个路由如下:
然后在你的组件中你可以使用它: