Typescript 导航链接不触发自定义挂钩

我是个新手，正在按照一个教程来训练自己.

我遇到的问题是，我有几条路由用不同的props 渲染相同的组件，但使用NavLink导航时，该组件似乎没有被挂载/卸载.所以我的定制钩子没有被触发，就好像我们还没有导航一样.

如果我在导航后手动刷新页面，组件将正确更新. 我用react@18.2.0和react-router-dom@6.16.0.

• index.tsx个

  import React from 'react';
  import ReactDOM from 'react-dom/client';
  import { BrowserRouter } from "react-router-dom";
  import './index.css';
  import App from './App';
  
  const root = ReactDOM.createRoot(
    document.getElementById('root') as HTMLElement
  );
  root.render(
    <React.StrictMode>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </React.StrictMode>
  );
  

• App.tsx个

  import React from 'react';
  import { Header } from "./components";
  import { Route, Routes } from "react-router-dom";
  import { MovieList } from "./pages";
  
  function App() {
    return (
      <>
        <Header />
        <Routes>
          <Route path="/" element={<MovieList />} />
          <Route path="/movies/bottom" element={<MovieList sort='bottom' />} />
          <Route path="/movies/unpopular" element={<MovieList sort='unpopular' />} />
          <Route path="/movies/upcoming" element={<MovieList sort='upcoming' />} />
        </Routes>
      </>
    );
  }
  
  export default App;
  

• 在Header.tsx的组成部分中，我有:

  <li>
    <NavLink to="/" className={linkClass} aria-current="page" end>Recent</NavLink>
  </li>
  <li>
    <NavLink to="/movies/unpopular" className={linkClass}>Unpopular</NavLink>
  </li>
  <li>
    <NavLink to="/movies/bottom" className={linkClass}>Bottom Rated</NavLink>
  </li>
  <li>
    <NavLink to="/movies/upcoming" className={linkClass}>Upcoming</NavLink>
  </li>
  

• MovieList.tsx个

  import { useState } from "react";
  import { Card } from "../components";
  import { MovieService } from "../services/Movie.service";
  
  type MovieListProps = {
    sort?: MovieService.defaultSort;
  }
  
  export function MovieList({ sort }: MovieListProps = {}) {
    const [filter, setFilter] = useState({
      defaultSort: sort
    });
    const movies = MovieService.useGet(filter);
  
    return (
      <main>
        <button onClick={() => setFilter({defaultSort: 'now_playing'})}>Recent</button>
        <button onClick={() => setFilter({defaultSort: 'unpopular'})}>unpopular</button>
        <button onClick={() => setFilter({defaultSort: 'bottom'})}>Bottom Ratted</button>
        <button onClick={() => setFilter({defaultSort: 'upcoming'})}>Upcoming</button>
        <section className="flex flex-wrap justify-center gap-4">
          {
            movies.data?.results.map((movie, index) => (
              <Card key={index} item={movie}/>
            ))
          }
        </section>
      </main>
    );
  }
  

在这里，当我单击标题中的NavLink时，movies对象不会更新，但我添加了一些调用setFilter的按钮，当我单击这些按钮时，它工作得很好，为什么？

您可以在此处找到该教程的代码:github

我之所以有不同之处，是因为我使用的是TypeScrip，并且我分离了代码以不同的方式获取API，您可以在这里找到我当前的代码:github

但我仍然不明白为什么我的实现不起作用.