函数组件url参数获取

1、http://127.0.0.1:8080/#/c?name=tom&age=10

路由:<Route path='/b' element={<B />}></Route>

A组件中:navigate('/c?name=tom&age=10', { replace: true })  ==> 浏览器地址栏:http://127.0.0.1:8080/#/c?name=tom&age=10

('/c?name=tom&age=10' 可换成{pathname: '/c',search: '?name=tom&age=10' })

B组件中: 

     const [searchParams, _] = useSearchParams()

      const obj = {}

      for (let item of searchParams.entries()) {

        obj[item[0]] = item[1]

      }

    obj==> {name: 'tom', age: '10'}

2、http://127.0.0.1:8080/#/b/tom/10

路由: <Route path='/b/:name?/:age?' element={<B />}></Route>

A组件中:navigate('/b/tom/10')  ==> 浏览器地址栏:http://127.0.0.1:8080/#/b/tom/10

B组件中:const params=useParams()  // params ==> {name: 'tom', age: '10'}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容