React Router Usage Detailed Introduction

React Router Usage

React enables developers to easily create interactive single-page applications (SPAs). A common challenge for single-page applications is how to deal with page navigation and routing. React Router is the tool to solve this problem.

Router is the core concept of React Router When a URL matches a route, React Router will render the corresponding components of the route.
React Router Will be based on URL Matching rules with routes to determine which component needs to be rendered。 Matching rules support dynamic parameters, regular matching, etc.
And React Router allows you to nest another route inside one route, thus implementing more complex interface structures.

usage

Import the BrowserRouter component and wrap it in the application'sRoot Componentexternal

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './App';
(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  ('root')
);

BrowserRouter and HashRouter
BrowserRouter uses HTML5's History APIs such as pushState and replaceState to implement clean URLs without hash. Similar to common URLs, for example: /about Every time the path changes, it uses the History API to modify the browser's address bar without refreshing the page.
HashRouter uses the hash part (#) of the URL for routing management, relying on the browser's hashChange event. The URL contains # symbols, for example: /#/about
HashRouter stores the path in the hash part of the URL, and the browser will not send the hash part to the server, so the page will not be refreshed. When the hash part of the URL changes, HashRouter intercepts these changes and updates the page.
browserRouter requires backend support, the server must configure to point all requests to the entry file(); while HashRouter is processed directly on the client without backend support

Define routes using Route

Use the Route component to define routes. Each Route component requires a path attribute, indicating the matching URL path, and an element attribute, indicating the component that needs to be rendered when the path matches.
React Router allows you to implement routing guard and redirect functions based on user identity, permissions and other conditions. For example, using the Navigate component can implement page redirection:

import React from 'react';
import { Route, Routes } from 'react-router-dom';
import Home from './Home';
import About from './About';
function App() {
  return (
    <div>
      <Routes>
        <Route path="/hone" element={<Home />} />
        <Route path="/about" element={<About />} />
        <Route path="*" element={<Navigate to={`/home`}/>}/>
      </Routes>
    </div>
  );
}

When the user accesses the /path, the Home component will be rendered; when the /about path is accessed, the About component will be rendered. To other routes, they will be redirected to /home

Nested routing

Nested routes can be implemented using the children attribute of Route or by defining subroutines inside Route.

function App() {
  return (
    <Routes>
      <Route path="/dashboard" element={<Dashboard />}>
        <Route path="settings" element={<Settings />} />
      </Route>
    </Routes>
  );
}

In this example, the /dashboard/settings path will render the Settings component, while /dashboard will render the Dashboard component

Usage parameters

React Router allows dynamic parameters to be used in routing paths and can be obtained through the useParams hook

import React from 'react';
import { useParams } from 'react-router-dom';
function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}
function App() {
  return (
    <Routes>
      <Route path="/user/:id" element={<User />} />
    </Routes>
  );
}

In the above example, :id in the /user/:id path is a dynamic parameter. When accessing /user/123, the User component renders and displays User ID: 123.

This is the end of this article about the overview of React Router usage. For more information about React Router usage, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!