La etiqueta de enlace dentro de BrowserRouter cambia solo la URL, pero no representa el componente

5 minutos de lectura

avatar de usuario
Ankit_M

Estoy creando una aplicación de clonación de Netflix y estoy usando react-router-dom v5 para cambiar entre diferentes páginas. Sin embargo, cuando hago clic en el Link etiqueta en Navbar.jsx, la URL cambia, pero el componente correspondiente no se procesa. He consultado numerosas publicaciones de StackOverflow sobre este tema, sin embargo, no puedo hacer que funcione. A continuación se muestra el código. Por favor, ayúdenme, ya que estoy atascado en esto durante 3 días 😥.

Lo que debería mostrar, al navegar a /series desde /:
ingrese la descripción de la imagen aquí

Lo que realmente está mostrando:
ingrese la descripción de la imagen aquí

  1. índice.js
import React from "react";
import { createRoot } from "react-dom/client";
import App from "./App";

const container = document.getElementById("root");
const root = createRoot(container);

root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);
  1. Aplicación.jsx
import React from "react";

import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./app.scss";
import Home from "./pages/home/Home";
import Watch from "./pages/watch/Watch";

const App = () => {
  return (
    <Router>
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/movies">
          <Home type="movies" />
        </Route>
        <Route path="/series">
          <Home type="series" />
        </Route>
        <Route path="/watch">
          <Watch />
        </Route>
      </Switch>
    </Router>
  );
};

export default App;
  1. Inicio.jsx

import React from "react";
import Featured from "../../components/featured/Featured";
import Navbar from "../../components/navbar/Navbar";

import "./home.scss";

const Home = ({ type }) => {
  return (
    <div className="home">
      <Navbar />
      <Featured type={type} />
    </div>
  );
};

export default Home;
  1. Navbar.jsx

import React, { useState } from "react";

import "./navbar.scss";
import { Link } from "react-router-dom";

const Navbar = () => {
  const [isScrolled, setIsScrolled] = useState(false);

  window.onscroll = () => {
    setIsScrolled(window.scrollY === 0 ? false : true);
    return () => window.onscroll == null;
  };

  return (
    <div className={`navbar ${isScrolled ? "scrolled" : ""}`}>
      <div className="container">
          <img src="./netflix_logo.jpg"
            alt="netflix logo"
          />
          <Link to="/" className="link">
            <span>Home</span>
          </Link>
          <Link to="/series" className="link">
            <span>Series</span>
          </Link>
          <Link to="/movies" className="link">
            <span>Movies</span>
          </Link>
          <Link to="" className="link">
            <span>New and Popular</span>
          </Link>
          <Link to="" className="link">
            <span>My List</span>
          </Link>
      </div>
    </div>
  );
};

export default Navbar;
  1. Destacado.jsx
import "./featured.scss";
import { IoMdPlay } from "react-icons/io";
import { FiInfo } from "react-icons/fi";

const Featured = ({ type }) => {
  return (
    <div className="featured">
      {type && (
        <div className="category">
          <span style={{ color: "white" }}>
            {type === "movies" ? "Movies" : "TV Series"}
          </span>
          <select name="genre" id="genre">
            <option>Genre</option>
            <option value="adventure">Adventure</option>
            <option value="comedy">Comedy</option>
            <option value="crime">Crime</option>
            <option value="fantasy">Fantasy</option>
            <option value="historical">Historical</option>
            <option value="horror">Horror</option>
            <option value="romance">Romance</option>
            <option value="sci-fi">Sci-fi</option>
            <option value="thriller">Thriller</option>
            <option value="western">Western</option>
            <option value="animation">Animation</option>
            <option value="drama">Drama</option>
            <option value="documentary">Documentary</option>
          </select>
        </div>
      )}
      <img
        src="https://m.media-amazon.com/images/M/MV5BNzM4OTkzMjcxOF5BMl5BanBnXkFtZTgwMTkxMjI1MTI@._V1_.jpg"
        alt="featured"
      />
      <div className="info">
        <img
          src="https://occ-0-1432-1433.1.nflxso.net/dnm/api/v6/LmEnxtiAuzezXBjYXPuDgfZ4zZQ/AAAABUZdeG1DrMstq-YKHZ-dA-cx2uQN_YbCYx7RABDk0y7F8ZK6nzgCz4bp5qJVgMizPbVpIvXrd4xMBQAuNe0xmuW2WjoeGMDn1cFO.webp?r=df1"
          alt=""
        />
        <span className="desc">
          When a beautiful stranger leads computer hacker Neo to a forbidding
          underworld, he discovers the shocking truth - the life he knows is the
          elaborate deception of an evil cyber-intelligence.
        </span>
        <div className="buttons">
          <button className="play">
            <IoMdPlay className="button-logo" />
            <span>Play</span>
          </button>
          <button className="more">
            <FiInfo className="button-logo" />
            <span>More Info</span>
          </button>
        </div>
      </div>
    </div>
  );
};

export default Featured;

  • ¿Qué rutas específicas tiene dificultades para navegar? Por su inclusión de la Home y Navbar ¿Estoy en lo correcto al suponer que tiene problemas para navegar entre los "/", "/movies" y "/series" ¿caminos? Él Navbar no enlaza con nada más. ¿Puedes compartir el Featured componente también?

    – Drew Reese

    11 abr a las 18:57


  • Hola @Drew, sí, tengo problemas para cambiar de/a "/", "/movies" y "/series" caminos. Editaré mi pregunta para incluir el Featured Componente también, sin embargo, no usa ningún react-router-dom funcionalidad.

    – Ankit_M

    11 abr a las 19:10

avatar de usuario
dibujó reese

Actualmente existe una incompatibilidad entre react-router-dom@5 y react@18.

Número de Github #7870

Soluciones posibles

  1. Vuelva a React 17 (o a la sintaxis de React 17) y arregle el index.js expediente.

    import { StrictMode } from "react";
    import ReactDOM from "react-dom";
    
    import App from "./App";
    
    ReactDOM.render(
      <StrictMode>
        <App />
      </StrictMode>,
      document.getElementById("root")
    );
    

    Editar enlace-etiqueta-dentro-navegador-enrutador-cambia-solo-la-url-pero-no-renderiza-la-composición

  2. Hacer el React.StrictMode componente un hijo/descendiente del componente del enrutador. Comentario.

    Reemplazar:

    <React.StrictMode>
      ...
      <BrowserRouter>
        ...
      </BrowserRouter>
    </React.StrictMode>
    

    con:

    <BrowserRouter>
      <React.StrictMode>
        ...
      </React.StrictMode>
    </BrowserRouter>
    

    Editar enlace-etiqueta-dentro-navegador-enrutador-cambia-solo-la-url-pero-no-representa-el-compo (bifurcado)

  3. Actualizar a react-router-dom@6 y arreglar las rutas.

    const App = () => {
      return (
        <Router>
          <Routes>
            <Route path="/" element={<Home />} />
            <Route path="/movies" element={<Home type="movies" />} />
            <Route path="/series" element={<Home type="series" />} />
            <Route path="/watch" element={<Watch />} />
          </Routes>
        </Router>
      );
    }
    

    Editar enlace-etiqueta-dentro-navegador-enrutador-cambia-solo-la-url-pero-no-representa-el-compo (bifurcado)

  • Hola Drew, muchas gracias! Seguí tu segunda solución (Actualizar a react-router-dom@6), refactorizó el código en consecuencia, y listo, ¡funcionó! Ninguna de mis búsquedas anteriores en Internet mencionó esto incompatibilidad entre react-router-dom@5 y react@18. Gracias a su respuesta, ya no estoy atascado y podré continuar con el resto de la aplicación.

    – Ankit_M

    12 abr a las 6:33


¿Ha sido útil esta solución?

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Configurar y más información
Privacidad