BrowserRouter 内的链接标记仅更改 URL，但不会呈现组件

Question

我正在构建一个 Netflix 克隆应用程序，并用于react-router-dom v5在不同页面之间切换。但是，当我单击Link中的标签时Navbar.jsx，URL 会发生变化，但相应的组件不会呈现。我查阅了很多关于这个主题的StackOverflow 帖子，但是，我无法让它工作。下面是代码。请帮助我，因为我已经被困在这个问题上三天了。

/series当导航到from时，它应该显示什么/：

它实际上显示了什么：

1. 索引.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>
);

2. 应用程序.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;

3. 首页.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;

4. 导航栏.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;

5. 精选.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;

Answer 1

react-router-dom@55.3.3 之前的版本和之间存在兼容性问题react@18。

• Github 问题 #7870
• PR #8831 合并以解决问题- 修复已于 2022 年 5 月 18 日react-router-domv5.3.3 合并。

解决方案

1. Bugfix 已合并到 v5.3.3 中。更新到react-router-dom@5.3.3或更高。

   从项目的根目录运行：

   • npm uninstall -S react-router-dom
   • npm install -S react-router-dom@5.3.3（或者@latest）

   

2. 恢复到 React 17（或 React 17 语法）并修复文件index.js。

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

   

3. 使该React.StrictMode组件成为路由器组件的子组件/后代组件。评论。

   代替：

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

   和：

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

   

4. 升级react-router-dom@6并修复路线。

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