My React App shows a blank white screen on localhost:3000 with no errors

user_17930098 0
Viewed 2231

My App.js file is

import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import "bootstrap/dist/css/bootstrap.min.css";

import CreateTodo from "./components/create-todo.component";
import EditTodo from "./components/edit-todo.component";
import TodosList from "./components/todos-list.component";

import logo from "./logo.png";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          
          <nav className="navbar navbar-expand-lg navbar-light bg-light">
            <a className="navbar-brand" href="https://codingthesmartway.com" target="_blank">
              <img src={logo} width="30" height="30" alt="CodingTheSmartWay.com" />
            </a>
            <Link to="/" className="navbar-brand">MERN-Stack Todo App</Link>
            <div className="collpase nav-collapse">
              <ul className="navbar-nav mr-auto">
                <li className="navbar-item">
                  <Link to="/" className="nav-link">Todos</Link>
                </li>
                <li className="navbar-item">
                  <Link to="/create" className="nav-link">Create Todo</Link>
                </li>
              </ul>
            </div>
          </nav>

          <Route path="/" exact component={TodosList} />
          <Route path="/edit/:id" component={EditTodo} />
          <Route path="/create" component={CreateTodo} />
        </div>
      </Router>
    );
  }
}

export default App;

On my browser, all I can see is a blank white screen, thats it. There are just 3 more routes for the application: /, /create, and /edit/:id for which I have connected to three other components TodosList, EditTodo, CreateTodo.

mern reactjs
1 Answers

You need to change few things

First import Routes

import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom";

Then wrap your router code inside Routes

<Routes>
    <Route path="/" exact component={TodosList} />
    <Route path="/edit/:id" component={EditTodo} />
    <Route path="/create" component={CreateTodo} />
</Routes>

For more info about react router check this link https://reactrouter.com/docs/en/v6/getting-started/overview

user_79671190
Related