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;