嵌套路由中的 React Router V6 useParams 不工作

Question

I have created a custom page with path "/:name" inside a nested route. I expected the output to be Hello, my friend {name} , instead I am getting an error saying ERR_ABORTED 404 (Not Found) . How do I fix this?

Route Page

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import HomePage from './Pages/HomePage'
import OtherPage from "./Pages/OtherPage"
import ErrorPage from './Pages/ErrorPage'
import MainProduct from "./Pages/projects/MainProduct"
import FirstProduct from "./Pages/projects/otherProduct/FirstProduct"
import SecondProduct from "./Pages/projects/otherProduct/SecondProduct"
import CustomProduct from "./Pages/projects/otherProduct/CustomProduct"
import MainNavComponent from './Components/MainNavComponent'

export default function App() {
    return (
        <div>
            <MainNavComponent />
            <Routes>
                <Route path='/' element={<HomePage />} />
                <Route path='/mainProduct' element={<MainProduct />}>
                    <Route path='firstProduct' element={<FirstProduct />} />
                    <Route path='secondProduct' element={<SecondProduct />} />
                    <Route exact path=":name" element={<CustomProduct />} />
                </Route>
                <Route path='/otherPage' element={<OtherPage />} />
                <Route path='*' element={<ErrorPage />} />
                <Route exact path=":name" element={<CustomProduct />} />

            </Routes>
        </div>
    )
}

Custom Route Page

export default function CustomProduct() {

    let { name } = useParams()

    return (
        <div>
            <h1>Hello, my friend {name}</h1>
        </div>
    )
}

Answer 1

 add  <BrowserRouter> before <Routes> tag and close it( </BrowserRouter>) after </Routes>

Answer 2

try this for your routes /mainProduct/{yourname} because your:name inside /mainProduct Route

 <Route path='/mainProduct' element={<MainProduct />}>
    <Route path='firstProduct' element={<FirstProduct />} />
    <Route path='secondProduct' element={<SecondProduct />} />
    <Route exact path=":name" element={<CustomProduct />} />
 </Route>

try this link /mainProduct/{yourname} such as: /mainProduct/name1 or /mainProduct/name2