You cannot render a <router> inside another <router>. You should never have more than one in your app. In react

See more:

ReactJS

Good Day

i am using Version    "react-router-dom": "^6.3.0",  
and i want to use Router in my React application .  my app.js looks like this 

<pre lang="TypeScript">export default class App extends Component {
 

```
    render() {
        return (
            <BrowserRouter>

                <div className="App">

                    <Layout />

                    <div id="wrapper">

                        <SideMenuBar />

                        <div id="content-wrapper">

                            <Routes>
                                <Route path="/" element={<App />}/>          
                                <Route path="/" element={<VideoContent />}  />  

                            </Routes>
              
                            <Fotter />

                        </div>
                    </div>

                </div>

            </BrowserRouter>
        );
    }
```

and my imports are

```

import React, { Component } from 'react'; 
import AppRoutes from './AppRoutes';
import { Layout } from './components/Layout';
import { SideMenuBar } from './components/SideMenuBar';
import { Search } from './components/Search';
import { VideoContent } from './components/VideoContent';
import { Fotter } from './components/Fotter';
import { NavMenu } from './components/NavMenu';
import { RightSideMenuBar } from './components/RightSideMenuBar';
import { BrowserRouter, Routes, Route } from 'react-router-dom';

```
my page does not display , i get an error on the console that states
router.ts:5 Uncaught Error: You cannot render a <router> inside another <router>. You should never have more than one in your app.
Thanks

What I have tried:

i checked different versions documentations