Setting up a React Router

All my questions become too convoluted, so i figured i’d ask like this:

https://imgur.com/a/rbeHya8

^ can this be done, and how do i do it?

I want to establish a react router, so it will update and remember url based on which page i’m on. I can’t get it to work and it’s driving me nuts 🙂

(only managed to do it directly from Paging.js, by wrapping buttons with < Link > tag and setting them directly to={/page/{api.id}} but that didn’t work when i uploaded the app to github, because the browser didn’t recognize the suffix as legit, so if i reloaded on /page/x it crashed and gave me 404. basically the link wasnt connected to anything, just gave a pseudo url)

github repo

Answer

You need to use a react router dom hook called useParams()

import { useParams } from 'react-router-dom'

const Page = () => {

  const { id } = useParams()

  return (
    <div>
      <h1>Page id: {id}</h1>
    </div>
  )
}

export default Page