MERN Stack -TodoAPP - Nothing display when adding Route

I am very new in that field and found this very interesting but got some issue

Hello everyone

I was learning and practising tutorial on mern stack, by watching a video on youtube but nothing is displayed since I have added the Routes. White page. Is there anyone who get an idea what is wrong.

https://www.codingthesmartway.com/the-mern-stack-tutorial-building-a-react-crud-application-from-start-to-finish-part-1/

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";
class App extends Component {
  render() {
    return (
      
      <Router>
        <div className="container">
             <h2>MERN-Stack Todo App</h2>
              <Route path="/" exact element={TodosList} />
              <Route path="/edit/:id" element={EditTodo} />
              <Route path="/create" element={CreateTodo} />
            </div>
                  
        
      </Router>
      
    );
  }
}

export default App;   ``` 

Many thanks in advance

Regards

Fred

Solution

It looks like the tutorial you're following is outdated and you're probably using a react-router-dom version that is higher than v5 but your code currently looks like it's still using some of the implementations for react-router-dom version 5. For example, the exact prop was removed from v6. Also, to solve the blank screen issue, you can wrap your routes around a Routes component.

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

class App extends Component {
  render() {
    return (
      <Router>
        <div className="container">
          <h2>MERN-Stack Todo App</h2>
          <Routes>
            <Route path="/" element={<TodosList />} />
            <Route path="/edit/:id" element={<EditTodo />} />
            <Route path="/create" element={<CreateTodo/>} />
          </Routes>
        </div>
      </Router>
    );
  }
}

This should possibly fix your blank screen issue, but I'd advise you switch your learning resource from the current platform you're learning from as the contents are very outdated. If you need to learn and be up to date with React then the official docs is the way to go: https://react.dev/learn