es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

El componente funcional desaparece al usar react-router-dom.

25 Jul, 2023 Programación

Solo quería hacer una configuración de proyecto simple con react-router-dom pero cada vez que uso route, toda la página queda en blanco. Mi NavBar desaparece. ¿Por qué?

Había una pregunta similar para un componente de clase, por lo que no fue útil para mí.

App.js:

import "./App.css";
import Nav from "./components/Nav";
import Products from "./components/Products";
import About from "./components/About";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
function App() {
  return (
    <>
      <router>
        <nav></nav>
        <route path="/about" component="{About}"></route>
        <route path="/products" component="{Products}"></route>
        <about></about>
      </router>

  );
}

export default App;

Nav:

import React from "react";
import Navstyle from "../styles/Nav.module.css";
const Nav = () => {
  return (
    <nav classname="{Navstyle.Nav}">
      <ul classname="{Navstyle.nav_links}">
        <li>
          <a href="!#">Home</a>
        </li>
        <li>
          <a href="!#">Products</a>
        </li>
        <li>
          <a href="!#">About</a>
        </li>
      </ul>
    </nav>
  );
};

export default Nav;

Los demás componentes solo devuelven etiquetas h2.

Tags:  ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que tu componente Nav está desapareciendo porque no está envuelto dentro del componente Switch en tu archivo App.js. Switch se asegura de que solo se renderice la primera Route que coincida en React, por lo que es necesario envolver todos los componentes Route dentro de él.

    Aquí está el archivo App.js actualizado:

    import "./App.css";
import Nav from "./components/Nav";
import Products from "./components/Products";
import About from "./components/About";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";

function App() {
  return (
    <>
      <router>
        <nav></nav>
        <switch>
          <route path="/about" component="{About}"></route>
          <route path="/products" component="{Products}"></route>
        </switch>
      </router>

  );
}

export default App;

    Al envolver los componentes Route dentro de Switch, estás permitiendo que React renderice solo la primera ruta que coincida (en este caso, /about o /products) y así se preserva tu componente Nav.

Comments are closed.