Click here to Skip to main content
15,799,257 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
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 (

                <div className="App">

                    <Layout />

                    <div id="wrapper">

                        <SideMenuBar />

                        <div id="content-wrapper">

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

                            <Fotter />




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.

What I have tried:

i checked different versions documentations

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900