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

Question

I am getting data from backend using URL and my URL is

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

the title of blog i am showing in URL and one of my user give title like this => my-örange and when i am fetching title from URL i am getting title as my-%C3%B6range i am getting title in react as this

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

so how to get same string?

Answer 1

You should use decodeURIComponent() . Read more on it here . Example:

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

Answer 2

You can use react-router useParams instead (from version v5.1):

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

the route:

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

and the URL should be http://localhost:4300/blog/örange