Das Link-Tag innerhalb von BrowserRouter ändert nur die URL, rendert die Komponente jedoch nicht

Lesezeit: 5 Minuten

Benutzer-Avatar
Ankit_M

Ich baue eine Netflix-Klonanwendung und verwende sie react-router-dom v5 um zwischen verschiedenen Seiten zu wechseln. Wenn ich jedoch auf die klicke Link eintaggen Navbar.jsx, ändert sich die URL, aber die entsprechende Komponente wird nicht gerendert. Ich habe zahlreiche StackOverflow-Beiträge zu diesem Thema konsultiert, kann es jedoch nicht zum Laufen bringen. Unten ist der Code. Bitte helft mir, ich hänge seit 3 ​​Tagen daran fest 😥.

Was es beim Navigieren zu anzeigen soll /series aus /:
Geben Sie hier die Bildbeschreibung ein

Was es tatsächlich zeigt:
Geben Sie hier die Bildbeschreibung ein

  1. index.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. App.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. Startseite.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. Vorgestellt.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/[email protected]_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;

  • Zu welchen spezifischen Routen haben Sie Schwierigkeiten beim Navigieren? Durch Ihre Einbeziehung der Home und Navbar Komponenten gehe ich richtig in der Annahme, dass Sie Probleme haben, zwischen den Komponenten zu navigieren "/", "/movies" und "/series" Wege? Das Navbar verlinkt nichts anderes. Kannst du die teilen Featured Komponente auch?

    – Zeichnete Reese

    11. April um 18:57 Uhr


  • Hallo @Drew, ja, ich habe Probleme beim Wechseln von/zu der "/", "/movies" und "/series" Pfade. Ich werde meine Frage bearbeiten, um die einzuschließen Featured Komponente ebenfalls, verwendet jedoch keine react-router-dom Funktionalität.

    – Ankit_M

    11. April um 19:10 Uhr

Benutzer-Avatar
Zeichnete Reese

Derzeit besteht eine Inkompatibilität zwischen [email protected] und [email protected].

Github-Ausgabe Nr. 7870

Mögliche Lösungen

  1. Kehren Sie zu React 17 (oder React 17-Syntax) zurück und korrigieren Sie die index.js Datei.

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

    Link-Tag-im-Browser-bearbeiten-router-ändert-nur-die-url-aber-rendert-den-compo-nicht

  2. Mach das React.StrictMode Komponente ein Kind/Nachkomme der Router-Komponente. Kommentar.

    Ersetzen:

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

    mit:

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

    Link-Tag-im-Browser bearbeitenRouter-ändert-nur-die-URL-aber-rendert-den-Compo nicht (gegabelt)

  3. Upgraden auf [email protected] und fixiere die Routen.

    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>
      );
    }
    

    Link-Tag-im-Browser bearbeitenRouter-ändert-nur-die-URL-aber-rendert-den-Compo nicht (gegabelt)

  • Hallo Drew, vielen Dank! Ich habe Ihre zweite Lösung befolgt (Upgrade auf [email protected]), den Code entsprechend umgestaltet und voila, es hat funktioniert! Keine meiner vorherigen Internetrecherchen erwähnte dies Unverträglichkeit zwischen [email protected] und [email protected]. Dank Ihrer Antwort stecke ich nicht mehr fest und kann mit dem Rest der Bewerbung fortfahren.

    – Ankit_M

    12. April um 6:33 Uhr


1010450cookie-checkDas Link-Tag innerhalb von BrowserRouter ändert nur die URL, rendert die Komponente jedoch nicht

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy