I have been learning about React Router have run into some issues while I was trying to implement a dynamic page creation based on the slugs that I receive from my fetch api call.

basically, I'm trying to redirect user to a new page after they click on a link - This new page will be a new component and I will make a new api call on this component with the slug as my search parameter.

However I'm struggling to dynamically change pages based on slugs.

Here is the component (BoxScore.js) in which I make the initial fetch and display data -

import React from "react";
import { useEffect, useState } from "react";

import { Link } from "react-router-dom";

const BoxScore = () => {
  const [users, setUsers] = useState([]);
  const [pageNumber, setPageNumber] = useState(1);



  useEffect(() => {
    fetch(
      `myfetchapihere.com`
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        setUsers(data);
        console.log(data);
        setPageNumber(pageNumber);
      });
  }, [pageNumber]);
     return (
         <> {users.map((user) => (
                <div
                  className="column"
                  key={user.id}
                  id={user.id}>
                  <div className="inner">
                    <div className="flex">
                      <h2 className="uk-text-small">
                     
         

 <Link to={user.slug} className="h2 link" id={user.slug}>
    {user.name}
    </Link>
    </div>

    </div></div>
        )}
</>);

In my App.js I have react router set up -

 <Routes>
      <Route path="boxscore/:slug" element={<BoxScore />}>
      <Route path=":slug" element={<OneScore />} />
    </Route>

   </Routes>

My OneScore component which isn't being rendered on the click of the link I set up in the Boxscore component -

import React from 'react'
import BoxScore from './Boxscore'
import { useParams } from "react-router";
import {useEffect} from 'react'

function OneScore() {

    const { slug } = useParams();
    
  useEffect(() => {
    // Fetch post using the postSlug
    console.log({slug});
  }, [slug]);

  return (
    <div>
          Hiii
    </div>
  )
}

export default OneScore

EDIT - I have managed to make the linking work thanks to @DrewReese comments however, the only issue remains now is that after the url is changed to (ex- www.a.com/boxscore/) the 'OneScore' component is not rendered instead the same BoxScore remains just the url is changed.