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

Question

我正在使用 URL 从后端获取数据，而我的 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

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

Answer 1

您应该使用decodeURIComponent() 。 在此处阅读更多信息。 例子：

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

Answer 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