React router dom library summary

`react-router-dom`It is an important library for implementing routing functions in React applications

1. Implement page navigation

1. Declarative routing definition

1.1 Basic Principles

Use `react-router-dom` to define a routing rule directly in the code, such as navigating from the `/home` path to the `Home` component.

1.2 Code Example

`Router` is the route root container, `Routes` wraps all routing rules, and `Route` defines a specific route, including the path (`path`) and the corresponding component (`element`).

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Home from "./Home";
import About from "./About";
const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/home" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
};
export default App;

2. Dynamic routing matching

2.1 Handling variable path parameters

You can define a routing path as `/user/:id`, where `:id` is a dynamic parameter.

2.2 Code Example

import {
  BrowserRouter as Router,
  Route,
  Routes,
  useParams,
} from "react-router-dom";
const UserDetail = () => {
  const { id } = useParams();
  return (
    <div>
      <h1>User Detail for ID: {id}</h1>
    </div>
  );
};
const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/user/:id" element={<UserDetail />} />
      </Routes>
    </Router>
  );
};
export default App;

2. Nested routing and layout management

1. Nested routing implementation

1.1 Building a multi-level page structure

For example: There is a parent route `/blog`, which contains the child routes `/blog/posts` (post list) and `/blog/post/:id` (single article details).

1.2 Code Example

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Blog from "./Blog";
import BlogPosts from "./BlogPosts";
import BlogPostDetail from "./BlogPostDetail";
const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/blog" element={<Blog />}>
          <Route path="posts" element={<BlogPosts />} />
          <Route path="post/:id" element={<BlogPostDetail />} />
        </Route>
      </Routes>
    </Router>
  );
};
export default App;

2. Layout Management and Share Layout Components

2.1 Unified layout application

Suppose we have a layout component called `Layout` that contains the navigation bar and sidebar.

2.2 Code Example

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import Layout from "./Layout";
import Home from "./Home";
import About from "./About";
const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="home" element={<Home />} />
          <Route path="about" element={<About />} />
        </Route>
      </Routes>
    </Router>
  );
};
export default App;

3. Code segmentation and lazy loading

1. Lazy loading principle and advantages

1.1 Optimize initial loading performance

For example: lazy loading of components of each module makes the application load only the necessary components at initial startup.

1.2 Code Example

import {
  BrowserRouter as Router,
  Route,
  Routes,
  lazy,
  Suspense,
} from "react-router-dom";
const Dashboard = lazy(() => import("./Dashboard"));
const Reports = lazy(() => import("./Reports"));
const Settings = lazy(() => import("./Settings"));
const App = () => {
  return (
    <Router>
      <Routes>
        <Route
          path="/dashboard"
          element={
            <Suspense fallback={<div>Loading...</div>}>
              <Dashboard />
            </Suspense>
          }
        />
        <Route
          path="/reports"
          element={
            <Suspense fallback={<div>Loading...</div>}>
              <Reports />
            </Suspense>
          }
        />
        <Route
          path="/settings"
          element={
            <Suspense fallback={<div>Loading...</div>}>
              <Settings />
            </Suspense>
          }
        />
      </Routes>
    </Router>
  );
};
export default App;

This is the end of this article about the summary of the role of the reactrouter dom library. For more related reactrouter dom library content, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!