techwithtim/Music-Controller-Web-App-Tutorial

T4, routing pages

Joe-ChenZ opened this issue · 1 comments

I was able to get this page:
image
and i also changed the syntax for react-router-dom from v5 to v6:

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

My webpage takes forever to run and "Failed to execute 'querySelectorAll' on 'Element': '\\\f' is not a valid selector." was the exception.

Help much appreciated :)

It seems like the error comes from "getElementById"? I am not too sure. so i will paste my App.js here too:

import { Home } from "@material-ui/icons";
import React, {Component} from "react";
import { render } from "react-dom";
import HomePage from "./Homepage";
import RoomJoinPage from "./RoomJoinPage";
import CreateRoomPage from "./CreateRoomPage";

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

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

Alright. I am closing this issue. I realize that the generated files need to be updated so I need to run npm run dev.

Update: it seems like the auto-generated files were generated again after saving. Maybe it is cache issue.