CODEWITHSUNDEEP
reactjsroutesreact-routerreact-router-dom
aaa
aaa

Reputation: 23

React Route shows blank page

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

Upvotes: 2

Views: 1232

Answers (2)

Aransiola
Aransiola

Reputation: 59

when rendering more that one line of code, your return needs to wrap them in a parenthesis. your WelcomeComponent should look like this

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

}

Upvotes: 2

Aditya Akella
Aditya Akella

Reputation: 519

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>
    );
  }

Upvotes: 6

Related Questions