javascript - 如何在反应路由器 dom 中定义以下模式的路由

Question

我正在尝试为以下路线制作页面：

 /password?token=479wasc8-8ffe-47a6-fatw-624e9d2c323a&user=e238bc4c-cf79-4cc3-b4a5-8fe7ewrta54a9w8a5

我最初的解决方案如下：

<Route exact path='/password?token=:token&user=:user' component={Password}/>

但我想我在这里遗漏了一些重要的东西。我尝试了各种来源，但没有找到任何接近我的问题的东西。

标签： javascriptreactjsreact-router

Answer 1

Password组件可以利用钩子useLocation来读取查询字符串：

<Route path='/password' component={Password} />

import { useLocation } from 'react-router-dom'

const useQuery = () => {
  return new URLSearchParams(useLocation().search)
}

const Password = () => {
  const query = useQuery()

  return (
    <div>
      <p>{query.get('token')}</p>
      <p>{query.get('user')}</p>
    </div>
  )
}

这是反应路由器网站上的示例