Json server Data is not Fetching Correctly in react

Question

I have tried to fetch data from my Local json server.

const {data, pending, error} = useFetch('http://localhost:8000/blogs');

this works correctly. but i tried to fetch the data inside the blogs,

const { data: blog, error , pending} = UseFetch(http://localhost:8000/blogs/${id});

this code snippet doesn't work correctly. When I run this code this runs like this. This server Address is not working.

http://localhost:3000/blogs/%201 It come "%201" to the end of the address. but my content "id=1" .

when I type to address http://localhost:3000/blogs/1 my code is working.

I am looking for a help. Check my Repository

Answer 1

Remove spaces from to="/pathname"

 <Link to={`/blogs/ ${blogs.id} `}>
     <h2 className='header'>{ blogs.title }</h2>
          <p>Written by { blogs.author } </p>
  </Link>

To this

<Link to={`/blogs/${blogs.id}`}>
     <h2 className='header'>{ blogs.title }</h2>
          <p>Written by { blogs.author } </p>
  </Link>