Switch и route не работают в полностековом react-django

hello я изучаю full stack react и django и сейчас работаю над маршрутизацией в этом моя маршрутизация не работает, я не знаю почему, но мой шаблон не отображается в браузере. пожалуйста, помогите мне Мой проект состоит из разных частей, это раздел React в передней части, и в этом разделе у меня есть несколько папок Папка src, в которой находятся компоненты[введите описание изображения здесь][1]

app.js

import React, { Component } from "react";
import { render } from "react-dom";
import HomePage from "./HomePage";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";
import ReactDOM from "react-dom";


export default class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>
        <p>sadiasidasipdhasip</p>
    </div>;
  }
}

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

HomePage

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


export default class HomePage extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return (
        <Router>
            <Switch>
                <Route path=''>
                    <HomePage />
                </Route>
                <Route path='/join'>
                    <RoomJoinPage />
                </Route>
                <Route path='/create'>
                    <CreateRoomPage />
                </Route>
            </Switch>
        </Router>
    );
  }
}

I created a component in which I used to address and put its name up. In this component I just return the home component and in the home component I have done all the tasks related to pagination but when I run the page White is displayed and a series of errors are displayed in the console that puts the image of errors and output

[this my out put][2]

[my error][3]


  [1]: https://i.stack.imgur.com/AqvBB.jpg
  [2]: https://i.stack.imgur.com/2Ez04.png
  [3]: https://i.stack.imgur.com/uVCnD.png

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