changing from old syntax of React Router: rendering white screen

I have been following the Learning React: A Hands-On Guide to Building Web Applications Using React and Redux book but as it is the old book so some of its syntax have been changed. Now, I am at the react router chapter and have to change old syntax to current version. The code examples of the books are as follow

var App = React.createClass ({
render : function (){
return (
<div> 
     <h1> Simple SPA </h1>
     <ul className = "header>
       <li> Home </li>
       <li> Stuff </li>
       <li> Contact </li>
     </ul>
     <div className = "content">
     </div>
</div>

ReactDOM.render(
   <ReactRouter.Router>
     <ReactRouter.Route path ="/" component = {APP}>
     </ReactRouter.Route>
   </ReactRouter.Router>,
   document.getElementById('app'))

I have tried to changed to below codes from looking tutorials but it is only rendering white screen. Please have a look at what I have done wrong here

class App extends React.Component{
  render(){
    return (
      <div> 
        <h1> Simple SPA</h1>
        <ul className='header'>
          <li>Home</li>
          <li>Stuff</li>
          <li>Contact</li>
        </ul>
        <div className='content'>

        </div>
      </div>
    )
  }
}
ReactDOM.render(
  <div>
    <Router>
      <Routes>
        <Route path ="/" element={App}></Route>
      </Routes>
    </Router>
  </div>,
  document.getElementById('app')
)

Answer

Following the syntax from the quickstart example you would need to change you code a little. You need to pass the element into the <Route/>-components as follows:

<Route path="/" element={<App />}>

Advertisement

Answer