Estoy tratando de mostrar eventos h2 en mi página y cuando hago clic en categoría de URL_eventos y notaciones también.

`Aplicación.js:

 import './App.css'; import React, { Component } from 'react' // import Header from './components/Header'; import Events from './components/Events/Events'; import Date from './components/Date/Date'; import Accueil from './components/Accueil/Accueil'; import { BrowserRouter, Route, Routes, Link } from 'react-router-dom'; function App() { return ( <div className="wrapper"> <h1>Marine Mammals</h1> <BrowserRouter> <nav> <ul> <li><Link to="/events">Events</Link></li> <li><Link to="/date">Date</Link></li> <li><Link to="/accueil">Accueil</Link></li> <li><Link to="/events/Category_events">Category Events</Link> </li> <li><Link to="/events/Notations">Notations</Link></li> </ul> </nav> <Routes> <Route path="/Date"> <Date/> </Route> <Route exact path="/events"> <Events/> </Route> <Route path="/events/:type"> <Events/> </Route> </Routes> </BrowserRouter> </div> ); } export default App;

Eventos.js:

 import React from 'react'; import { useParams } from 'react-router-dom'; import Category_events from './Category_events'; import Notations from './Notations'; export default function Events(){ const { type } = useParams(); return ( <> <h2>Events</h2> {type === 'Category_events' && <Category_events />} {type === 'Notations' && <Notations/>} </> ); }

Recibí este error: Falló la compilación del módulo (de ./node_modules/babel-loader/lib/index.js): SyntaxError: /home/thibaut/fastmeet/src/App.js: Se esperaba la etiqueta de cierre JSX correspondiente para <Routes>. (35:8)

33 | <ruta ruta="/fecha"/>
34 | <Fecha/>

35 | </Ruta> | ^ 36 |
37 | <Ruta ruta exacta="/eventos"/>
38 | <Eventos/>