My Portfolio

React Nav bar using React-Router

Using vite and react-router, I created a simple navbar template that can be used for any single page application.

Visit website

---

Dependencies

Vite and Node:

npm create vite@latest

npm install

npm run dev

React-router:

npm install react-router-dom@6

---

Components

Code for Nav component:

import React from 'react';
import { NavLink } from react-router';

export default function AppNavBar() {
  let activeClassName = 'active';

  return (
    <nav className="nav">
      <h2>New Site</h2>
      <ul>
        <li> 
          <NavLink to="/" end> Home </NavLink> 
        </li>
        
        <li> 
          <NavLink to="/about" className={({ isActive }) => (isActive ? activeClassName : '')}> About </NavLink>
        </li>

        <li>
          <NavLink to="/contact" className={({ isActive }) => (isActive ? activeClassName : '')}> Contact
          </NavLink>
        </li>

      </ul>
    </nav>
  );
}

Code for Router using BrowserRouter from react-router:

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
import Contact from './Contact';

export default function AppRouter() {
  return (
    <Routes>
      <Route exact path="/" element={<Home />} />

      <Route path="/about" element={<About />} />

      <Route path="/contact" element={<Contact />} />
    </Routes>
  );
}

Make sure to include the BrowserRouter by wrapping the whole project like so:

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './App';
import './index.css';

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

---

Languages and Tools used in this Project:

$~~~$ $~~~$ $~~~$ $~~~$ $~~~$ $~~~$ $~~~$

---

Connect with me:

$~~~$ $~~~$