React Libraries & Router

Topics Covered

React Libraries

• React components are self-contained, reusable elements — many pre-built component libraries exist online
• Using a library: find it (npm, Google), install with npm install lib-name, import the component, render with expected props

// Using a React library
import { ComponentName } from 'lib-name';

function App() {
    return <ComponentName prop="value" />;
}

Single-Page Applications

• SPAs load a single HTML page and dynamically update content using JavaScript
• Instead of requesting new pages from the server, the app renders different components based on the current URL
• Client-side routing: render a different component depending on the URL

// Conceptual client-side routing
function App(props) {
    let componentToRender = null;
    if (currentUrl === '/home') {
        componentToRender = <HomePage />;
    } else if (currentUrl === '/about') {
        componentToRender = <AboutPage />;
    }
    return <div>{componentToRender}</div>;
}

React Router

• A library of React Components that determine which components to render based on the current URL
• Install: npm install react-router
• Used in declarative mode (not as data or framework)

BrowserRouter

• BrowserRouter tracks the current URL in its state and re-renders descendants when the URL changes
• Wrap the entire <App /> in <BrowserRouter> in main.jsx

import { BrowserRouter } from 'react-router';
import App from './components/App.jsx';

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

Routes & Route

• <Routes> contains <Route> elements that specify which component to render for each URL path
• path prop matches the URL, element prop specifies the component to render

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

function App(props) {
    return (
        <Routes>
            <Route path="home" element={<HomePage />} />
            <Route path="about" element={<AboutPage />} />
        </Routes>
    );
}

Link

• Use <Link> instead of <a> for navigation between routes
• to prop specifies the destination path (like href for anchors)
• Links update the URL state without reloading the page

import { Link } from 'react-router';

function Nav(props) {
    return (
        <nav>
            <ul>
                <li><Link to="home">Home</Link></li>
                <li><Link to="about">About</Link></li>
            </ul>
        </nav>
    );
}

URL Parameters

• A URL parameter is a variable in the URL path, useful for routes pointing to similar resources
• Use :param syntax in the path (e.g., posts/:postId)
• useParams() hook accesses the value of URL parameters

import { useParams } from 'react-router';

// In Routes:
<Route path="posts/:postId" element={<BlogPost />} />

// In Component:
function BlogPost(props) {
    const urlParams = useParams();
    const postId = urlParams.postId;
    return <h1>You are looking at blog post {postId}</h1>;
}

Naming Routes (REST)

• The web is based on REST architecture — each route should refer to a unique resource
• Design routes first, components second
• Think about what information belongs at each URL

<Routes>
    <Route path="/products" element={<AllProductsPage />} />
    <Route path="/products/hat" element={<HatPage />} />
    <Route path="/products/shoes" element={<ShoesPage />} />
    <Route path="/account" element={<AccountPage />} />
</Routes>

Nested Routes & Outlet

• Route paths correspond to URL segments, with nested <Route> elements for each segment
• Nested routes render in place of an <Outlet /> component in the parent

import { Outlet } from 'react-router';

function App(props) {
    return (
        <Routes>
            <Route path="user" element={<UserLayout />}>
                <Route path="profile" element={<UserProfile />} />
                <Route path="favorites" element={<FavoriteItems />} />
            </Route>
            <Route path="items" element={<ItemList />} />
        </Routes>
    );
}

function UserLayout(props) {
    return (
        <div className="user-layout">
            <h1>User Page</h1>
            <Outlet />
        </div>
    );
}

Protected Routes

• Nested routes can restrict access — only show content if the user is logged in
• A wrapper component checks authentication and either renders <Outlet /> or a fallback

function RequireAuth(props) {
    if (!userIsLoggedIn) {
        return <p>Forbidden!</p>;
    } else {
        return <Outlet />;
    }
}

function App(props) {
    return (
        <Routes>
            <Route element={<RequireAuth />}>
                <Route path="profile" element={<ProfilePage />} />
                <Route path="secret" element={<SecretPage />} />
            </Route>
            <Route path="signin" element={<SignInPage />} />
        </Routes>
    );
}

Firebase Hosting

• GitHub Pages cannot cleanly handle client-side routing — use Firebase Hosting instead
• Firebase provides web hosting, databases, and user authentication
• Use Firebase CLI tools and Vite build scripts to deploy React apps