Can't pass params in URL to react component

Question

I am trying to pass params in the URL to a React component, but doing so gives errors. These are the errors:

Uncaught SyntaxError: Unexpected token '<'

epoxy:68 Uncaught ReferenceError: $ is not defined
    at epoxy:68:9

Screenshot of error messages:

I get these errors if I navigate to the page http://localhost:3000/project-details/epoxy.

However, if I naviagte to http://localhost:3000/project-details then no errors.

But if I navigate to http://localhost:3000/project-details/ (notice the slash at the end), then I get the same errors again.

Here is the relevant code: App.js:

import { React } from 'react';
import AppRoute from '../components/route-components/Approute';

function App() {
  return (
   <AppRoute />
  );
}

export default App;

AppRoute.js:

function AppRoute() {

    return (
        < BrowserRouter >
            < Switch >
                < Route path = '/' exact component = { Home } />  
                < Route path = { `/project-details/:id` } component = { SingleProjectPage } /> 
                < Route path = { `/project-details` } component = { SingleProjectPage } />  
                < Route path='*' component = { ErrorPage }/> 
            </ Switch> 
        </ BrowserRouter>
    )
        
    
}
export default AppRoute;

SingleProjectPage:

import React, { useEffect, Fragment } from 'react';

const SingleProjectPage = (props) =>{
    let data = sectionData.sectionTitle.singleProject;
    useEffect(() => {
        console.log(props.match.params.id);
        window.scrollTo(0,0);
    }, [])
    return (
        <Fragment>
            hello
        </Fragment>

    )
}
export default SingleProjectPage;

I took over this project and it is already a massive project so I am having a hard time diagnosing the issue. It looks to me like this should just work, I am not seeing any issues. After reading other similar questions, it looks like the code may be trying to use jQuery before it is available to me, but why would the path http://localhost:3000/project-details/ break the app just because of a forward slash at the end?

Any ideas? I can provide more code if needed.

EDIT: it even fails if I change the route to this:

{/* < Route path = { `/project-details/:id` } component = { SingleProjectPage } /> 
< Route path = { `/project-details` } component = { SingleProjectPage } />   */}
< Route path = { `/project-details/epoxy` } component = { SingleProjectPage } />  

Its like I am unable to change that route in any way.

Answer 1

Instances of params are deprecated with a react-router v6.

React-Router v6 video 1: https://www.youtube.com/watch?v=k2Zk5cbiZhg&t=502s

This page explains update from React Router 5.1 to latest.

React-Router v6 changes