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