0

Estoy desarrollando una página web con React y React-router-dom en mi componente App.js tengo el componente Routes en cual defino las rutas de la página, la ruta inicial muestra un componente de SigIn definido por la siguiente línea <Route path="/" element={} /> Cuando el usuario inicia sesión y si todo ha salido bien con un navigate lo llevo a la siguiente página usando la ruta /success en esta ruta tengo otro componente el cual es el componente Template este tiene una barra de navegación que contiene varios NavLink cuando selecciono alguno me debería de mostrar el contenido según corresponda a la ruta por ejemplo si selecciono el navlink “inicio” debería mostrar el contenido de inicio si selecciono el navlink mis torneos debería mostrar su contenido el problema es que cuando selecciono un NavLink me da el siguiente error: “You rendered descendant (or called useRoutes()) at "/success" (under ) but the parent route path has no trailing "*".”

Este es el código de mi componente Template.js:

import { Flex, NavLink, ThemeIcon } from "@mantine/core";
import {
  IconHome2,
  IconShieldHalfFilled,
  IconSoccerField,
  IconTrophy,
  IconUser,
} from "@tabler/icons-react";
import { Routes, Route } from "react-router-dom";
import { NavLink as BaseNavLink } from "react-router-dom";
import Inicio from "./Inicio";
import MisTorneos from "./MisTorneos";
import MisEquipos from "./MisEquipos";
import MisJugadores from "./MisJugadores";
import MisCanchas from "./MisCanchas";
import SignIn from "./SignIn";

const Template = ({ routes }) => {
  const data = [
    { icon: IconHome2, label: "Inicio", route: "/inicio" },
    { icon: IconTrophy, label: "Mis torneos", route: "/misTorneos" },
    { icon: IconShieldHalfFilled, label: "Equipos", route: "/misEquipos" },
    { icon: IconUser, label: "Jugadores", route: "/jugadores" },
    { icon: IconSoccerField, label: "Canchas", route: "/canchas" },
  ];

  const items = data.map((item) => (
    <NavLink
      key={item.label}
      label={item.label}
      component={BaseNavLink}
      to={item.route}
      icon={
        <ThemeIcon color="#CED4DA">
          <item.icon size="26px" color="#868E96" />
        </ThemeIcon>
      }
      h="46px"
      p="10px"
      variant="light"
    />
  ));

  return (
    <div>
    <Flex className="Template" direction="column" w="100%" h="100vh">
      <Flex className="Body" direction="row" h="calc(100vh - 59px)">
        <Flex
          direction="column"
          w="250px"
          h="calc(100vh - 59px)"
          p="20px 10px 10px 10px"
          justify="space-between"
          bg="#F1F3F5"
        >
          <Flex direction="column" w="230px" h="230px">
            {items}
          </Flex>
        </Flex>
        <Flex
          className="CONTENT"
          direction="column"
          w="calc(100% - 230px)"
          h="calc(100vh - 59px)"
          gap="32px"
          p="32px"
        >
          <Routes>
            <Route path="/inicio" element={<Inicio />} />
            <Route path="/misTorneos" element={<MisTorneos />} />
            <Route path="/misEquipos" element={<MisEquipos />} />
            <Route path="/jugadores" element={<MisJugadores />} />
            <Route path="/canchas" element={<MisCanchas />} />
          </Routes>
        </Flex>
      </Flex>
    </Flex>
    </div>
  );
};
export default Template;

Este es código App donde defino las rutas:

import { Route, Routes } from "react-router-dom";
import "./App.css";
import SignIn from "./Components/SignIn";
import Template from "./Components/Template";

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<SignIn />} />
        <Route path="/success" element={<Template />} />
      </Routes>
    </div>
  );
}

export default App;
2
  • usas la version 5 o la version 6??? Commented el 30 jun. 2023 a las 2:17
  • La versión 6 de React Router Commented el 30 jun. 2023 a las 16:19

1 respuesta 1

0

Al final logre resolverlo estaba haciendo uso incorrecto de las rutas, ya que debía usar rutas anidadas entonces la ruta success la adapte para que pudiera contener rutas anidadas de la siguiente manera:

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<Iniciar />} />
        <Route path="/success/*" element={<Template />}>
          <Route path="inicio" element={<Inicio />} />
          <Route path="misTorneos" element={<MisTornoes />} />
          <Route path="misEquipos" element={<MisEquipos />} />
          <Route path="misJugadores" element={<MisJugadores />} />
          <Route path="misCanchas" element={<MisCanchas />} />
        </Route>
      </Routes>
    </div>
  );
}

export default App;

De esta manera muestro el contenido correspondiente a cada ruta y tambien soluciono el error que mostraba. Otra modificación que realice fue en mi archivo Template quite las rutas que habia definido y en su lugar coloque utilice un esto para renderizar el contenido correspondiente a cada ruta

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.