读取url参数
:style
在路由路径中使用语法并useParams()
读取参数
function App() {
return (
<div>
{/* 编写路由导航 */}
<ul>
<li>
<Link to="/classes">学习</Link>
</li>
</ul>
{/* 路由配置 */}
<Routes>
<Route path="/classes" element={<Classes/>}></Route>
{/* 配置详情页,演示路由传参取参 */}
<Route path="/detail/:course" element={<Detail/>}></Route>
</Routes>
</div>
)
}
function Detail() {
let params = useParams();
return (
<div>
我是{params.course}课程详情页
</div>
)
}
function Classes() {
return (
<div>
<ul>
<li>
<Link to="/detail/react">react</Link>
</li>
<li>
<Link to="/detail/vue">vue</Link>
</li>
</ul>
</div>
)
}
页面效果如下:
注意!路径段:course
和参数的键params.course
匹配。
但是我我使用的useLocation()方法,通过console.log打印一下,可以看到返回以下信息