所以我有一个react电影网站，从tmbd获取数据，在主页上显示所有趋势电影数据，在收藏夹页面上显示所有最喜欢的电影，我路由这两个页面，但当我试图访问收藏夹我的浏览器变得非常慢，并告诉我停止网页，只有在重新加载页面后，我得到重定向到收藏夹页面任何解决方案在这？
这是我的导航栏链接的地方，当我试图访问收藏夹页面它显示页面正在变慢

import React, { Component } from 'react'
import { Link } from "react-router-dom";

export default class Navbar extends Component {

  render() {
    return (
      <div style={{display:'flex', padding:'0.5'}}>

        <Link to="/" style={{textDecoration:'none'}}>
        <h1 style={{marginTop:'1rem',marginLeft:'1rem'}}>Movies App</h1>
        </Link>

        <Link to='/favourites' style={{textDecoration:'none'}}>
        <h2 style={{marginLeft :'5rem',marginTop:'2rem'}}>Favorites</h2>
        </Link>
      
     
      </div>
    )
  }
}

这是我的APP. js

import logo from './logo.svg';
import './App.css';
import React, { Component }  from 'react';
import Navbar from './Components/Navbar';
import Banner from './Components/Banner';
import Movies from './Components/Movies';
import Favourite from './Components/Favourite';
import {Switch,Route, BrowserRouter,Routes} from 'react-router-dom';

function App() {
  return (
    // <>
    // <Navbar></Navbar>
    // <Banner></Banner>
    // <Movies></Movies>
    // </>
    <BrowserRouter>
      <Navbar/>
      <Routes>
      
      <Route exact path="/" element={<HomePage/>}/>
      <Route exact path="/favourites" element={<Favourite/>}/>
      
      </Routes>
    
    </BrowserRouter>
  );
}

function HomePage() {
  return (
    <>
      <Banner />
      <Movies />
    </>
  );
}

export default App;

当我尝试访问单个文件而不路由它工作正常，但当我尝试访问此路由我的浏览器开始变慢，数据不提取，直到我重新加载页面
我的Github回购链接：https://github.com/faizxmohammad/React-MovieApp/tree/master/src
我希望在不降低浏览器速度的情况下获取收藏夹页面的数据