hello i'm learning full stack react and django and now work on routing in this my routing is not working i dont know why but my template did not show on my browser please help me My project consists of different parts, which is the React section in the front section, and in this section I have several folders The src folder in which the components are located[enter image description here][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