React Router not render

Question

I tried using react router but it doesn’t work. I already know that React Router Dom v6 has changed from Switch to Routes but when I run the program it just shows a blank screen. Does anyone know how to fix this? Here is my code:

App.js
”’

    import React, {Component} from "react";
import { BrowserRouter as Router } from "react-router-dom";
import { render } from "react-dom";
import HomePage from "./HomePage";


export default class App extends Component{
       render() { 
        return (
        <Router>
            <div>
                <HomePage />
            </div>
            </Router>
            );
    }
}

const appDiv = document.getElementById("app");
render(<App />,appDiv);

”’
HomePage.js
”’

import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
    Routes ,
    Route ,
} from "react-router-dom" 

export default class HomePage extends Component{

    render () {
        return ( 
            <Router>
                <Routes>
                    <Route path='/'>
                        <p>This is Home Page</p>
                    </Route>
                    <Route path='/join' element={<RoomJoinPage />} />
                    <Route path='/create' element={<CreateRoomPage />} />

                </Routes>
            </Router>
        );
    }
}

”’

Asked By: Osama Sheha

||

Source

Answer 1

The error is that "You cannot render a Router inside another Router " occurs when we have 2 Router components in the same React application.

So if u see u are calling in App.js and when u call Homepage from app.js it renders again. Thats why everything becomes blank.

and avoid using p tag inside render function in homepage.js

Try doing this:

**App.js**


    import React, {Component} from "react";
    import { BrowserRouter as Router } from "react-router-dom";
    import { render } from "react-dom";
    import HomePage from "./HomePage";
    
    
    export default class App extends Component{
           render() { 
            return (
                <div>
                    <HomePage />
                </div>
                );
        }
    }
    
    const appDiv = document.getElementById("app");
    render(<App />,appDiv);
  



**Homepage.js**

import React,{Component} from 'react';
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import { BrowserRouter as Router ,
    Routes ,
    Route ,
} from "react-router-dom" 

export default class HomePage extends Component{

    render () {
        return ( 
            <Router>
                <Routes>
                    <Route path='/'>
             
                    </Route>
                    <Route path='/join' element={<RoomJoinPage />} />
                    <Route path='/create' element={<CreateRoomPage />} />

                </Routes>
            </Router>
        );
    }
}

Answered By: Shashank

Answer 2

I had same with routing, but now got it!!

Answered By: sigmahh

React Router not render

Question:

Answers: