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...
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
2 Answers
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>
);
}
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>
)
}
}
David Miller brings 15 years of experience in global economics, personal finance strategy, and market dynamics. He specializes in turning complex economic trends into actionable insights for everyday readers.
