reactjs - Nested components not rendering when using a nested route with react-router

Question

I am make a multi-page website with React using react-router. I am trying to render a Project page that displays the particular project's photos and other info using the id from the params.

There are two problems:

1. When I'm rendering the project component without a nested route, it is working fine and rendering the nested component of that page. But, when I'm rendering the page with a nested route, it is not rendering the nested component, still the page is rendering.
2. When I console.log get.match.params.id, it's working but when I give it as a param to the getProject function, it says it is undefined.

// App.js

import React, {useEffect} from 'react'
import { BrowserRouter as Router, Switch, Route} from 'react-router-dom'
import './css/mversion.css'
import './css/style.css'
import Home from './components/Home'  
import Projects from './components/projects/Projects'  
import People from './components/People'  
import Contact from './components/contact/Contact'  
import Nav from './components/layout/Nav'
import Footer from './components/layout/Footer'
import AOS from 'aos';
import 'aos/dist/aos.css';
import ProjectPage from './components/projects/ProjectPage'


function App() {

  useEffect(() => {
    AOS.init({duration : 1500});
  },[])

  return (
    <Router>
        <Nav />
          <Switch>
              <Route path='/' exact component={Home} />
              <Route path='/projects' component={Projects} />
              <Route path='/people' component={People} />
              <Route path='/contact' component={Contact} />
              <Route path='/:category/:name/:id' exact component={ProjectPage} />
              <Route path='/test' component={ProjectPage} />
          </Switch>
        <Footer /> 
    </Router>
  )
}

export default App;

Here, the component with the path /test is rendering perfectly but the path with params is not rendering. I've also tried different paths without params, and it isn't working only when there is more than one path.

// ProjectPage.js

import React from 'react'
import { ProjectInfo } from './ProjectInfo';
import Gallery from './Gallery';

function ProjectPage(get) {
    // console.log(get.match.params.id)

    var project = getProject(3);
    console.log(project)

    function getProject(id){
    for (let i = 0; i < ProjectInfo.length; i++) {
        if (ProjectInfo[i].id === id) { 
            return ProjectInfo[i]
        }
    }}

    return (
        <>
            <h1>Page rendered</h1>
            <Gallery id={project.id} pathName={project.pathName} category={project.category} photoCount={project.photoCount} desc={project.desc} />
        </>
    )
}

export default ProjectPage

Answer 1

等待大神答复