如何獲取包含ö的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