I get a blank page when I use Link. I should see Events, date, accueil I use the last version of react-router. I don't know if I have to delete to?
This is my code:
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
// import Header from './components/Header';
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<BrowserRouter>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</BrowserRouter>
</div>
);
}
export default App;Thank you!
It seems likely that it is causing an error because Link must be a descendant of the Router (BrowserRouter) component.
import logo from './logo.svg';
import './App.css';
import React, { Component } from 'react'
import Events from './components/Events/Events';
import { BrowserRouter, Route, Routes, Link } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<div className="wrapper">
<h1>Marine Mammals</h1>
<nav>
<ul>
<li><Link to="/events">Events</Link></li>
<li><Link to="/date">Date</Link></li>
<li><Link to="/accueil">Accueil</Link></li>
</ul>
</nav>
<Routes>
<Route path='/Events' element={<Events/>}/>
</Routes>
</div>
</BrowserRouter>
);
}