What is React Router and how do you set up basic routing?

· Category: React

Short answer

React Router is a declarative routing library for React. It maps URL paths to components and provides navigation tools without full page reloads.

Steps

  1. Install react-router-dom.
  2. Wrap your app in <BrowserRouter>.
  3. Define routes inside <Routes> and <Route>.
  4. Use <Link> or <NavLink> for client-side navigation.

Example

import { BrowserRouter, Routes, Route, Link } from 'react-router-dom';

function App() {
  return (
    <BrowserRouter>
      <nav>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </nav>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="/users/:id" element={<UserProfile />} />
      </Routes>
    </BrowserRouter>
  );
}

Tips

  • Use useParams to read dynamic route segments.
  • Use useNavigate for programmatic navigation.
  • Lazy load routes with React.lazy and <Suspense> to reduce initial bundle size.