ReactRouter | Blair Wang

type

status

date

slug

summary

React Router

Frontend Router: A path corresponds to a component. When we access a path in the browser, the component corresponding to that path will be rendered on the page.

Creating a Routing Development Environment

CRA

Create a project and install all dependencies:

Install the latest React Router package:

Start the project:

Requirement: Create a routing system that can switch between a login page and an article page.

/login -> Login Page

/article -> Article Page

Use createBrowserRouter to configure path and element (component/jsx), and RouterProvider to bind the routes.

React Router Abstract Routing Module

Router Configuration in Actual Development

Page components: login & article

Import router components and configure path - component mapping

Render RouterProvider in the application entry file (inject the router instance)

Route Navigation

In a routing system, multiple routes need to navigate between each other, and during navigation, parameters might need to be passed for communication.

Declarative Navigation Declarative navigation refers to describing where to navigate to using the <Link /> component in the template. For example, the left-side menu in a backend management system typically uses this approach.

Syntax Explanation: By specifying the target route path in the to attribute of the component, the component will be rendered as an anchor link (<a>) supported by the browser. If parameters need to be passed, they can be concatenated directly in the string.

Programmatic Navigation

Programmatic navigation refers to obtaining the navigation method through the useNavigate hook and then using the method to perform routing jumps in a command-like manner. For example, if you want to navigate after a login request is completed, this approach is more flexible.

Syntax Explanation: Use the navigate method to pass the address path and achieve navigation.

Passing Parameters in Navigation

Using searchParams for Parameters

Route Navigation with Parameters

Nested Route Configuration

When routes are embedded within other routes, this relationship is called nested routing. Routes nested within a top-level route are known as secondary routes.

Implementation Steps:

Use the children attribute to configure route nesting.

Use the <Outlet /> component to specify the rendering location for secondary routes.

Router：

top-level route:

Comments: <Outlet /> is the outlet for secondary routes.

Default Secondary Route Configuration

Scenario and Configuration:

When accessing a top-level route, a default secondary route component can be rendered. To achieve this, simply omit the path for the secondary route and set the index attribute to true.

404 Route Configuration

Scenario: When the URL path entered in the browser does not match any route in the route configuration, a 404 fallback component can be rendered to improve user experience.

Implementation Steps:

Prepare a NotFound component.

Add a route at the end of the route configuration array with a as the path to handle unmatched routes.

Two Routing Modes

Mainstream frameworks commonly use two routing modes: history mode and hash mode. In React Router, createBrowserRouter is used for history mode, and createHashRouter is used for hash mode.

Choose based on whether backend support is needed.

Switching Methods: Simply switch the API, and no other changes are needed.