Can't pass params in URL to react component-CodePudding

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.

CodePudding user response：

As it turns out, the route works if I only have one forward slash in the path. No idea why. But for example, this will work:

< Route path = { `/epoxy` } component = { SingleProjectPage } />

But this will not:

< Route path = { `/project/epoxy` } component = { SingleProjectPage } />

Just having the extra path /project at the prefix breaks it.

CodePudding user response：

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