1

Holaaaa buenas tardes, espero que la esten pasando bien en estas navidades.

Tengo una duda sobre react-router-domv6 y es la siguiente:

function RouteMain() {
  return (
  <BrowserRouter>
    <Routes>
      <Route element={<TOutlet />}>
        <Route path="/" element={<Home />} />
        <Route path="/classi" element={<Classes />}>
          <Route index element={<ChoiceSchool />} />
          <Route path="/classi/:nameOfSchool" element={<ChoiceFieldOfStudy />}/>
          <Route path="/classi/:nameOfSchool/:fieldOfStudy" element={<ChoiceYear />}/>
          <Route path="/classi/:nameOfSchool/:fieldOfStudy/:year" element={<ChoiceSection/>}/>
        </Route>
      </Route>
    </Routes>
   </BrowserRouter>)}

Tengo esta funcion donde renderizo rutas para mi app, pero quisiera saber si puedo crear un componente para ordenar mi codigo de la siguiente manera:

function RouterMain() {
  return (
  <BrowserRouter>
    <Routes>
      <Route element={<TOutlet />}>
        <Route path="/" element={<Home />} />
        <RouteSecond />
      </Route>
    </Routes>
  </BrowserRouter>)}

function RouteSecond() {
  return (
   <Route path="/classi" element={<Classes />}>
     <Route index element={<ChoiceSchool />} />
     <Route path="/classi/:nameOfSchool" element={<ChoiceFieldOfStudy />} />
     <Route path="/classi/:nameOfSchool/:fieldOfStudy" element={<ChoiceYear />}/>
   <Route path="/classi/:nameOfSchool/:fieldOfStudy/:year" element={<ChoiceSection />}/>
</Route>)}

Pero me da el siguiente error:

Error

Si alguien es tan amable de ayudame se lo agradeveria muchisimo!!!!!

Feliz navidaaaaaad :DDDD

1 respuesta 1

1
   function RouterMain() {
  return (
      <Routes>
        <Route element={<TOutlet />}>
          <Route path="/" element={<Home />} />
          <RouteSecond />
        </Route>
      </Routes>
  );
}

function RouteSecond() {
  return (
    <Routes>
      <Route path="/classi" element={<Classes />}>
        <Route index element={<ChoiceSchool />} />
        <Route path="/classi/:nameOfSchool" element={<ChoiceFieldOfStudy />} />
        <Route
          path="/classi/:nameOfSchool/:fieldOfStudy"
          element={<ChoiceYear />}
        />
        <Route
          path="/classi/:nameOfSchool/:fieldOfStudy/:year"
          element={<ChoiceSection />}
        />
      </Route>
    </Routes>
  );
1
  • Creo que poniendo otro Routes y colocando el BrowserRouter en el index.js podría funcionarte. Commented el 27 dic. 2022 a las 2:15

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.