Not Found Page in React Router

- by mahmood

When no other route matches the URL, you can render a “not found” route using path="*". This route will match any URL, but will have the weakest precedence so the router will only pick it if no other routes match.

function App() {
  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="dashboard" element={<Dashboard />} />
      <Route path="*" element={<NotFound />} />
    </Routes>
  );
}

References
https://reactrouter.com/docs/en/v6/getting-started/overview#not-found-routes

Nested Routes in React Router

- by mahmood

Imagine we want to have the nested routing for User page via tabs.

function App() {
    return (
        <div>
            <Routes>
                <Route path="/" element={<Home/>}/>
                <Route path="/user" element={<User/>}>
                    <Route path="account" element={<Account/>}/>
                    <Route path="profile" element={<Profile/>}/>
                </Route>
            </Routes>
        </div>
    );
}
function User() {
    return (
        <div>
            <h1>User Page</h1>
            <Link to="profile">Profile</Link>
            <br/>
            <Link to="account">Account</Link>
            <Outlet/>
        </div>
    );
}

The Outlet component will always render the next match.
The parent route (User) persists while the swaps between the two child routes (Profile and Account).

References
https://reactrouter.com/docs/en/v6/getting-started/tutorial#nested-routes
https://reactrouter.com/docs/en/v6/getting-started/concepts#outlets
https://ui.dev/react-router-nested-routes
https://www.robinwieruch.de/react-router-nested-routes/

Reading URL Params in React Router

- by mahmood

App.tsx

function App() {
    return (
        <div>
            <Navbar/>
            <Routes>
                <Route path="/welcome" element={<Welcome/>}/>
                <Route path="/products" element={<Products/>}/>
                <Route path="/products/:product" element={<Product/>}/>
            </Routes>
        </div>
    );
}

Products.tsx

import {useParams} from 'react-router-dom'

function Product() {

    let params = useParams();

    return (
        <div>
            <strong>Product : </strong>{params.product}
        </div>
    );
}

export default Product;

References
https://reactrouter.com/docs/en/v6/getting-started/tutorial#reading-url-params

Display Active Links in React Router using NavLink

- by mahmood

It’s very common, especially in navigation lists, to display the link as the active link the user is looking at. Let’s add this treatment to our invoices list by swapping out Link for NavLink.

import { NavLink, Outlet } from "react-router-dom";
import { getInvoices } from "../data";

export default function Invoices() {
  let invoices = getInvoices();
  return (
    <div style={{ display: "flex" }}>
      <nav
        style={{
          borderRight: "solid 1px",
          padding: "1rem",
        }}
      >
        {invoices.map((invoice) => (
          <NavLink
            style={({ isActive }) => {
              return {
                display: "block",
                margin: "1rem 0",
                color: isActive ? "red" : "",
              };
            }}
            to={`/invoices/${invoice.number}`}
            key={invoice.number}
          >
            {invoice.name}
          </NavLink>
        ))}
      </nav>
      <Outlet />
    </div>
  );
}

We changed the color of our link by looking at the isActive value that NavLink passed to our styling function.

You can do the same thing with className on NavLink:

// normal string
<NavLink className="red" />

// function
<NavLink className={({ isActive }) => isActive ? "red" : "blue"} />

References
https://reactrouter.com/docs/en/v6/getting-started/tutorial#active-links

Defining Routes in React Router

- by mahmood

index.js

import * as React from "react";
import * as ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById("root")
);

App.js

import * as React from "react";
import { Routes, Route, Link } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <div className="App">
      <h1>Welcome to React Router!</h1>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="about" element={<About />} />
      </Routes>
    </div>
  );
}

References
https://reactrouter.com/docs/en/v6/getting-started/installation#create-react-app