React Route shows blank page

Question

I have a problem I am new and I am trying to use React Router but it shows me a blank page whenever I use it Here is my code:

    import React, {Component} from 'react';
import {BrowserRouter as Router, Route} from 'react-router-dom';
class TodoApp extends Component{
    render() {
      return (
        <div className="TodoApp">
            <Router>
                <>
                <Route path="/" element={<WelcomeComponent />} />
                </>
            </Router>
        </div>
      )
    } 
}


class WelcomeComponent extends Component{
    render()
    {
        return <div>
            abcd
        </div>
    }
}

If I delete the route line and instead I write somthing else the code works fine so I know I have a problem with the Route line and I am not sure what is it

Answer 1

Route can only be child of Routes. Try adding Routes as parent like below and you should see WelcomeComponent loading up.

render() {
    return (
      <div className="TodoApp">
        <Router>
          <Routes>
            <Route path="/" element={<WelcomeComponent />} />
          </Routes>
        </Router>
      </div>
    );
  }