1
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.

1 respuesta 1

0

Ensaya agregando la propiedad exact asi:

<Route exact path="envios" element={<Envios />}>
    <Route exact path="nuevo" element={<NuevoEnvio />} />
</Route>
2
  • Pipe, gracias por la respuesta pero me sigue mostrando ambos componentes, probe tambien con outlet y nada. Lo que en realidad quiero es que el componente envío se esconda y el componente nuevoEnvio sea el que se muestre solamente el 16 feb. 2022 a las 19:23
  • Si, eso se supone que es lo que debería pasar con la solución que te puse. No tiene sentido que te aparezcan los 2 si las rutas son exactas... seguro que pusiste el exact como era?
    – Pipe
    el 16 feb. 2022 a las 19:25

Tu Respuesta

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

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