在React中使用react-router
库加载URL参数,你需要做以下几步:
react-router-dom
(如果你还没有安装的话):npm install react-router-dom
useParams
钩子:import { useParams } from 'react-router-dom';
useParams
钩子获取URL参数:function MyComponent() {
const { param1, param2 } = useParams();
// 现在你可以在组件中使用param1和param2
}
这里是一个完整的示例:
import React from 'react';
import { BrowserRouter as Router, Route, Link, Switch, useParams } from 'react-router-dom';
function MyComponent() {
const { param1, param2 } = useParams();
return (
<div>
<h1>My Component</h1>
<p>Param1: {param1}</p>
<p>Param2: {param2}</p>
</div>
);
}
function App() {
return (
<Router>
<div>
<nav>
<ul>
<li>
<Link to="/example/123/abc">Example</Link>
</li>
</ul>
</nav>
<Switch>
<Route path="/example/:param1/:param2">
<MyComponent />
</Route>
</Switch>
</div>
</Router>
);
}
export default App;
上面的例子中,MyComponent
读取URL中的 param1
和 param2
参数,并显示它们。App
组件包含了一个链接,当用户点击时,会导航到 /example/123/abc
,这将使得 MyComponent
组件中的 param1
等于 123
,param2
等于 abc
。
当然,你也可以在你的路由配置中使用 useParams
来动态生成链接:
<Route path="/example/:param1/:param2">
<Link to={`/example/${param1}/${param2}`}>Link Text</Link>
</Route>
这样,当URL参数变化时,链接的文本也会相应地更新。
领取专属 10元无门槛券
手把手带您无忧上云