I get a blank page with my render. I checked in the other similar questions to find the solution but I still get this blank page. THank you for your help!
This is my code:
App.js
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes } from 'react-router-dom';
function App() {
return (
<div className="wrapper">
<h1>Marine Mammals</h1>
<BrowserRouter>
<Routes>
<Route path='/Events' element={<Events/>}>
<Events/>
</Route>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;Events.js
import React from 'react';
export default function Events(){
return<h2>Events</h2>;
}I think you need to look at your react-router-dom version.
In V5 you use tags between the component that should appear in the route(nested). In version 6 you can use the element within the tag.
https://reactrouter.com/docs/en/v6/upgrading/v5#relative-routes-and-links