You should never have more than one router in your app-CodePudding

You cannot render a inside another . You should never have more than one in your app.

Why am I having this issue? I have checked my code and I dont have a Router inside another Router. In fact, i only have one router on my app.

This is the component:

import React from 'react';
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Portfolio from '../pages/Portfolio';
function Menu()
{
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Portfolio />} />
      </Routes>
    </BrowserRouter>
  );
};

export default Menu;

And I call it from this component:

import React from 'react';
import AboutMe from '../components/AboutMe';
import Header from '../components/Header';
import Menu from '../components/Menu';
import Particle from '../components/Particle';
import Services from '../components/Services';
import Skills from '../components/Skills';
function Portfolio()
{
  return (
    <React.StrictMode>
      <Particle />
      <Menu />
      <Header />
      <div className='d-flex flex-column mt-5' id='about-me-services'>
        <div><AboutMe /> </div>
        <div><Services /> </div>
      </div>
      <Skills />
    </React.StrictMode>

  );
}

export default Portfolio;

Thanks for your help :)

CodePudding user response：

Finally, Menu contains a Portfolio, which contains a Menu, which contains a Portfolio, which contains... etc. as super said. Thanks for your help