路由传递参数_params传参

在要跳转的路由路径中使用:params这种语法传递参数，然后在跳转后的页面中使用useParams读取传递过来的参数。

xxxxxxxxxx
<Route path="user/:city" element={<User />} />
 {/* 设置参数的key值 */}

xxxxxxxxxx
{/* 跳转路由的时候传递参数，参数值为beijing */}
<NavLink to="user/beijing"  style={({ isActive }) => {
              return isActive ? { color: 'red' } : undefined
            }}>用户页面</NavLink>

xxxxxxxxxx
import {  Outlet, useParams } from 'react-router-dom'
function User(props) {
 const params= useParams()
 //获取传递过来的参数
 console.log(params)//{city:'beijing'}
  return <>
    < h2>我是用户页面</h2>
    <Outlet />
  </>

}

实时效果反馈

1. 使用params传参使用__读取参数:

A useParam

B useSearchParam

C useParams

D useSearchParams

答案

1=>C