React Router DOM

React Router DOM is essential for managing routing in web applications. It re-exports the react-router package for web apps and react-router-native for native apps. This guide covers how to set up and use various components of React Router DOM.

Installation

First, install react-router-dom from npm:

npm i react-router-dom

BrowserRouter

BrowserRouter is the main parent component that enables the use of React Router in your application. Include it in your main.jsx or index.jsx file like this:

import { BrowserRouter } from "react-router-dom";

<React.StrictMode>
    <BrowserRouter>
        <App />
    </BrowserRouter>
</React.StrictMode>;

Routes & Route

Routes is the parent component for all individual Route components. Define your routes as follows:

import { Route, Routes } from "react-router-dom";

<Routes>
    <Route path="/" element={<Home />} component={Home} />
    <Route path="/data" component={Data} />
</Routes>;

Link

Instead of using <a> tags for navigation, React Router provides the <Link> component:

<Link to="/contact">Contact</Link>

In anchor tags, the link is passed in the href attribute, but in the Link component, the link is passed in the to prop.

NavLink

The NavLink component is similar to the Link component but is specifically used for navigation bars. It provides an "active" class to the link that corresponds to the current page.

<NavLink> is similar to <Link> but provides an active class for styling the active link:

<NavLink to="/"
    style={({ isActive }) => {
            return {color: isActive ? '#153448' : 'steelblue'}
        }
    }
>Home</NavLink>
<NavLink to="/about"
    style={({ isActive }) => {
            return {color: isActive ? '#153448' : 'steelblue'}
        }
    }
>About</NavLink>

When using the NavLink component, it automatically applies an active class to the link when the corresponding page is being viewed. This is useful for indicating the current page in the navigation bar.

Error Page

Show an error page for non-existent routes:

<Route path="/*" component={Error} />

Nested Routing

Define nested routes for structured navigation:

<Route path="/" component={Menu}>
    <Route path="about" component={About} />
    <Route path="contact" component={Contact} />
    <Route path="service" component={Service} />
    <Route path="events" component={Events}>
        <Route path="anual" component={Anual} />
        <Route path="monthly" component={Monthly} />
    </Route>
</Route>

Outlet & Shared Layout

To properly display page data for nested routes, we use the Outlet component. The Outlet component allows us to define a shared layout that remains consistent while only the nested content changes.

<div style={styles.container}>
    <NavLink to="/">Home</NavLink>
    <NavLink to="/about">About</NavLink>
    <NavLink to="/contact">Contact</NavLink>
    <NavLink to="/service">Service</NavLink>
</div>
<Outlet />

The Outlet component is called at the end of the menu to render the nested route's content. This setup is akin to fixed components seen on sites like Instagram, where the profile data remains static while the content (e.g., Posts, Reels, Mentions) changes.

Using Outlet helps us manage scenarios where parts of the layout (like a navbar) stay the same across different pages, while only specific sections of the page content update based on the nested route.

One common issue is that navigating to the root path (e.g., / or localhost:5173) may only display the menu. We'll address this by defining an index route to handle the default content for the root path.

Index Route

Ensure a default page loads for the base route.

To display the home page when navigating to / or localhost:5173, we use the index route. This ensures that the home page content is shown alongside the menu.

<Route path='/' Component={Menu}>
    <Route index Component={Home} />
    <Route path='about' Component={About} />
    <Route path='contact' Component={Contact} />
    <Route path='service' Component={Service} />
</Route>

By defining an index route within the main route, we ensure the home page is displayed at the root path. Alternatively, you can use an empty string ('') or a forward slash ('/') for the home page route:

<Route path='' Component={Home} />
<Route path='/' Component={Home} />

Both methods will display the home page content when navigating to / or localhost:5173.

useNavigate

The useNavigate hook allows for programmatic navigation without using Link or NavLink.

First, import useNavigate from react-router-dom:

import { useNavigate } from "react-router-dom"

To navigate to a specific route, you can define a function that uses navigate:

const navigate = useNavigate();

const about = () => {
    navigate('/about');
}

return (
    <>
        <h1>Home</h1>
        <button onClick={about}>About More</button>
    </>
);

For navigation similar to the forward and back buttons found in many websites, you can define the following functions:

const GoBack = () => {
    navigate(-1);
}

const GoForward = () => {
    navigate(+1);
}

return (
    <>
        <button onClick={GoBack}>Go Back</button>
        <button onClick={GoForward}>Go Forward</button>
    </>
);

Handle navigation history with navigate:

const GoBack = () => {
    navigate(-1);
};
const GoForward = () => {
    navigate(+1);
};

<button onClick={() => GoBack()}>Go Back</button>
<button onClick={() => GoForward()}>Go Forward</button>