Estoy tratando de hacer una segunda página para mi sitio web y me cuesta entender cómo funciona el enrutamiento de reacción.
Aquí está el código:
import { FaGithub, FaUserAstronaut, FaLinkedin } from 'react-icons/fa'; import MarsSvg from './MarsSvg'; import MarsPage from '../pages/MarsPage'; import { Routes, Route } from "react-router-dom" function NavBar () { return ( <nav className=''> <div className="flex justify-around items-center text-5xl"> <Routes> <Route path="/mars" element={<MarsPage />} /> </Routes> <MarsSvg/> <ul className='flex hover:scale-125 hover:bg-white duration-500 rounded-full'> <a href='https://github.com/DevSnippy'> <FaGithub/> </a> </ul> <ul className='flex hover:scale-125 hover:bg-white duration-500 rounded-full'> <FaUserAstronaut/> </ul> <ul className='flex hover:scale-125 hover:bg-white duration-500 rounded-full'> <FaLinkedin/> </ul> </div> </nav> ) } export default NavBarRepresenta un componente, pero quiero que sucedan 2 cosas:
Agrego BrowserRouter sobre el componente para que las rutas funcionen (no funcionará sin ellas). Luego usé Link de react-router-dom para ir a una nueva página al hacer clic en su icono svg.
(ver: https://reactrouter.com/docs/en/v6/getting-started/overview )
import React from "react"; import { FaGithub, FaUserAstronaut, FaLinkedin } from "react-icons/fa"; import MarsSvg from './MarsSvg'; import MarsPage from '../pages/MarsPage'; import { Routes, Route, BrowserRouter, Link } from "react-router-dom"; function NavBar() { return ( <BrowserRouter> <nav className=""> <div className="flex justify-around items-center text-5xl"> <Routes> <Route path="/mars" element={<MarsPage />} /> </Routes> <Link to="/mars"> <MarsSvg/> </Link> <ul className="flex hover:scale-125 hover:bg-white duration-500 rounded-full"> <a href="https://github.com/DevSnippy"> <FaGithub /> </a> </ul> <ul className="flex hover:scale-125 hover:bg-white duration-500 rounded-full"> <FaUserAstronaut /> </ul> <ul className="flex hover:scale-125 hover:bg-white duration-500 rounded-full"> <FaLinkedin /> </ul> </div> </nav> </BrowserRouter> ); } export default NavBar;¿Es esto lo que quisiste decir?
Editar: enlace incorrecto cambiado de v5 a v6