如何获取包含ö的url动态标题http://localhost:4300/title/örange答案

【问题标题】：how to get url's dynamic title http://localhost:4300/title/örange which contain ö如何获取包含ö的url动态标题http://localhost:4300/title/örange
【发布时间】：2022-01-13 08:09:46
【问题描述】：

我正在使用 URL 从后端获取数据我的网址是

http://localhost:4300/title/örange

我在 URL 中显示的博客标题我的一个用户给出这样的标题=> my-örange 当我从 URL 获取标题时，我得到的标题是 my-%C3%B6range 我得到了这样的反应标题

let { title } = this.props.match.params;
console.log(title) // output => my-%C3%B6rang
//i want output my-örange

那么如何得到相同的字符串呢？

【问题讨论】：

标签： javascript reactjs url frontend

【解决方案1】：

您应该使用decodeURIComponent()。阅读更多关于它的信息here。示例：

let { title } = decodeURIComponent(this.props.match.params);
console.log(title) // output => my-örange

【讨论】：

只是一点点补充。如果您使用功能组件和 React Router，您可以尝试使用“react-router”中的 useParams 挂钩而不是 match；

【解决方案2】：

您可以改用 react-router useParams（从 v5.1 版本开始）：

import { useParams } from "react-router-dom"
const params = useParams()
console.log(params.title)

路线：

 <Route path="blog/:title" element={<Blog />} />

并且 URL 应该是 http://localhost:4300/blog/örange

【讨论】：