Creé una página personalizada con la ruta "/:name" dentro de una ruta anidada. Esperaba que el resultado fuera Hello, my friend {name} , en cambio recibo un error que dice ERR_ABORTED 404 (Not Found) . ¿Cómo puedo solucionar esto?
Página de ruta
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> ) }Página de ruta personalizada
export default function CustomProduct() { let { name } = useParams() return ( <div> <h1>Hello, my friend {name}</h1> </div> ) } add <BrowserRouter> before <Routes> tag and close it( </BrowserRouter>) after </Routes>
intente esto para sus rutas /mainProduct/{yourname} porque su :name dentro /mainProduct Route
<Route path='/mainProduct' element={<MainProduct />}> <Route path='firstProduct' element={<FirstProduct />} /> <Route path='secondProduct' element={<SecondProduct />} /> <Route exact path=":name" element={<CustomProduct />} /> </Route> pruebe este enlace /mainProduct/{yourname} como: /mainProduct/name1 o /mainProduct/name2