const Dashboard = () => {
const persona = useSelector((state) => state.persona);
const navigate = useNavigate();
const handleSalir = () => {
return undefined;
};
if (persona == undefined) {
console.log(`persona`, persona);
return <LinearProgress />
} else {
if (persona.apiKey == undefined) {
console.log(`personaApiKey`, persona.apiKey);
return <Navigate replace to={"/login"}></Navigate>;
} else {
return (
<div>
<Navbar bg="light" variant="light">
<Container>
<Navbar.Brand href="#home">Envios</Navbar.Brand>
<Nav className="me-auto">
<NavLink to="/">Home</NavLink> |
<NavLink to="/envios">Envios</NavLink> |
<NavLink to="/nuevo">Nuevo envio</NavLink> |
</Nav>
<Button onClick={handleSalir} style={{ float: "right" }}>
Salir
</Button>
</Container>
</Navbar>
<Outlet></Outlet>
</div>
);
}
}
};
export default Dashboard;
Buenas, tengo este código, el problema es que al apretar en el link de nuevo envío en vez de mostrarme solo el componente nuevoEnvío me muestra el componente envíos y también el componente nuevoEnvío.
function App() {
const store = createStore(
reducer,
);
return (
<Container>
<Card>
<Card.Body>
<Row>
<Col>
<Provider store={store}>
<BrowserRouter>
<Routes>
<Route path="/login" element={<Login />} />
<Route path="/" element={<Dashboard />}>
<Route index element={<Home />} />
<Route path="envios" element={<Envios />}>
<Route path="nuevo" element={<NuevoEnvio />} />
</Route>
</Route>
{/* <Route path="*" element={<p>NO SE HALLO</p>}></Route> */}
<Route
path="*"
element={<Navigate replace to={"/"}></Navigate>}
/>
</Routes>
</BrowserRouter>
</Provider>
</Col>
</Row>
</Card.Body>
</Card>
</Container>
);
}
export default App;
Quiero que solo me muestre un componente o el otro y que la ruta sea anidada ej: .com/envios/nuevo Intente hacer que la ruta no sea hijo pero me muestra la ruta como .com/nuevo en vez de .com/envios/nuevo, espero una solución!
No se que mas poner pero la página me pide que siga poniendo y no se que poner entonces sigo escribiendo bla bla bla bla bla bla bla.