Astro: Failed to load resource: net::ERR_CONNECTION_REFUSED with React(Next.js) And no they do not repeat the same errors

So I have an Astro project with integrations with vue, svelte, react, and tailwindcss.

And I suddenly got the errors:Failed to load resource: net::ERR_CONNECTION_RESET, Failed to load resource: net::ERR_CONNECTION_REFUSED, And another Failed to load resource: net::ERR_CONNECTION_REFUSED. Here is the code below.

index.astro:

---
import Layout from "../layouts/Layout.astro";
import Navbar from '../components/React/Navbar'
---

<style>

</style>

<Layout>
    <Navbar />
</Layout>

Navbar.jsx:

import React from 'react'
import { BrowserRouter, Routes, Link} from 'react-router-dom'
import Home from './Home'
import About from './About'
import Blogs from './Blogs'

const Navbar = () => {
  return (
    <>
        <BrowserRouter>
            <Routes>
                <Link to='/'>
                    <p>Home</p>
                    <Home />
                </Link>
                <Link to='/about'>
                  <p>About</p>
                  <About />
                </Link>
            </Routes>
        </BrowserRouter>
    </>
  )
}

export default Navbar

And About.jsx , Blog.jsx , and Home.jsx have the following code:

import React from 'react'

const Component = () => {
  return (
    <>
        
    </>
  )
}

export default Component

Is there any way to fix this?