Installation

npm create vite@latest my-first-react-app -- --template react
cd my-first-react-app
npm install
npm run dev

React Router

npm install react-router-dom

Create components/Navigation.jsx

import { Link, NavLink } from 'react-router-dom';

function Navigation() {
  return (
    <nav>
      <ul>
        <li>
          <NavLink to="/" className={({ isActive }) => isActive ? 'active' : ''}>
            Home
          </NavLink>
        </li>
        <li>
          <NavLink to="/about" className={({ isActive }) => isActive ? 'active' : ''}>
            About
          </NavLink>
        </li>
        <li>
          <NavLink to="/contact" className={({ isActive }) => isActive ? 'active' : ''}>
            Contact
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navigation;

Basic setup App.jsx

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Navigation from './components/Navigation'
import Home from './pages/Home';
import About from './pages/About';
import Contact from './pages/Contact';

function App() {
  return (
		<div className="App">
	    <Router>
			    <Navigation />
	        <Routes>
	          <Route path="/" element={<Home />} />
	          <Route path="/about" element={<About />} />
	          <Route path="/contact" element={<Contact />} />
	        </Routes>
	    </Router>
    </div>
  );
}

export default App;

URL Parameter

Route parameter

<Route path="/user-profile/:id" element={<UserProfile/>} />