React Router не рендерится

Я пытался использовать react router, но он не работает. Я уже знаю, что React Router Dom v6 изменился с Switch на Routes, но когда я запускаю программу, она просто показывает пустой экран. Кто-нибудь знает, как это исправить? Вот мой код:

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>
        );
    }
}

'''

Ошибка "You cannot render a Router inside another Router" возникает, когда у нас есть 2 компонента Router в одном приложении React.

Так что если вы видите, что вы вызываете в App.js, и когда вы вызываете Homepage из app.js, она снова отображается. Поэтому все становится пустым.

и избегайте использования тега p внутри функции render в файле homepage.js

Попробуйте сделать следующее:

**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>
        );
    }
}

У меня было то же самое с маршрутизацией, но теперь получилось!!!

Вернуться на верх