He estado siguiendo el libro Learning React: A Hands-On Guide to Building Web Applications Using React and Redux , pero como es el libro anterior, se ha cambiado parte de su sintaxis. Ahora, estoy en el capítulo del enrutador de reacción y tengo que cambiar la sintaxis anterior a la versión actual. Los ejemplos de código de los libros son los siguientes

 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'))

Intenté cambiar a los códigos a continuación de buscar tutoriales, pero solo muestra la pantalla en blanco. Por favor, eche un vistazo a lo que he hecho mal aquí

 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') )