如何从 URL 中获取参数答案

【问题标题】：How to take parameters from a URL如何从 URL 中获取参数
【发布时间】：2020-01-31 00:35:04
【问题描述】：

我正在创建一个密码重置组件，用户将在其中输入他们的电子邮件地址，如果电子邮件存在，则会向该用户发送重置电子邮件。重置电子邮件包含类似 website.reset/{userId}/{token} 的 URL。

我不想将用户 ID 或令牌从后端发送到前端以避免网络钓鱼。我需要的是用户单击链接并被路由到有效的 URL。我想从 URL 中提取用户 ID 和令牌并将它们插入到我的路由页面中

我希望我的 Route 从 URL 中读取信息并呈现为有效页面：

<Router primary={false}>
   <UpdatePassword path="/password-confirm/:uid/:token"  />
</Router>

我想我需要在我的 UpdatePassword 组件中添加一个生命周期函数，当用户登陆 website.password-confirm/1234/abc 时，我从 URL 中的 GET 参数。但是，我无法让它工作。

我的应用是否可以读取 URL 中的信息，还是需要事先提供该信息？

【问题讨论】：

你的应用中的路由结构是什么？你们提供ssr吗？这是一个 create-react-app 项目吗？
不应该是<Route path="...." component={UpdatePassword} />吗？
@Afsanefda 是的，我正在使用 create-react-app。没有SSR。我正在使用到达路由器。我没有使用任何嵌套路由。我允许以 /password-confirm/ 开头的所有 URL 呈现，因此当用户转到 /password-confirm/1234/abc 时，他们将到达与 /password-confirm/ 相同的页面

【解决方案1】：

您可以使用上面的代码行来获取参数值。

const { uid, token } = this.props.match.params

【讨论】：

我已经尝试了一些变体，但是我总是收到一条错误消息，告诉我某些内容未定义。我正在使用 React Hooks，所以这可能会有所作为。
你能显示代码 sn-p 你在哪里以及如何尝试吗？
我尝试了两种不同的方法。首先我尝试在我的组件声明后添加这一行 const UpdatePassword = (props) => { const classes = useStyles(); const [passType, setPassType] = useState('password') //const {uid, token} = this.props.match.params;
然后我尝试编写一个函数以在单击按钮时运行。 const testuseEffect= () => { Axios.get('http://localhost:3000/reset-password-confirm/', { params: { resetPasswordToken: this.props.match.params } })}
我得到的错误是无法读取未定义的属性'props'。