I'm trying to make a 2nd page for my website and I'm having hard time understanding how react routing works .
Here's the code:
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 NavBar
It does render a component but I want 2 things to happen:
I add BrowserRouter over the component to get the routes to work (wont work without). Then I used Link from react-router-dom to go to a new page upon clicking your svg icon.
(see: 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;
Is this what you meant?
Edit: Switched incorrect link from v5 to v6