---
title: "React Learning Notes - Routing (Router) - Part 5"
description: "The fifth article in our React learning series, explaining the principles of front-end routing, as well as how to implement basic React Router setup, pass route parameters, and create nested routes."
canonical_url: "https://blog.markkulab.net/en/post/learn-react-part-5"
author: "Mark Ku"
author_url: "https://blog.markkulab.net/en/author/mark-ku"
site: "Mark Ku's Tech Notes"
date_published: "2022-07-24 01:04:01 +0800"
category: "Frontend"
tags: ["react", "router", "routing", "frontend", "javascript", "spa", "學習筆記"]
language: "en"
license: "CC BY 4.0"
license_url: "https://creativecommons.org/licenses/by/4.0/"
attribution: "when reusing or quoting, credit the author and link back to the original"
---
# React Learning Notes - Routing (Router) - Part 5
## How Routing Works
The core principle of routing is to dynamically load the corresponding component based on the URL request.
## Installing React Router (Most Common)
```
npm install react-router-dom --save // 基於 react-router 實作的 lib
npm install @types/react-router-dom --save-deve // 官方沒提供
```
## Usage
React Router's usage is primarily composed of these three parts:
BrowserRouter + Switch + Route
```
app.tsx
sign } />
404 } />
```
* `exact` - Strict, only takes effect on an exact match.
* `Switch` - To prevent pages from stacking, use `Switch`. Only one page component will be active.
* The 404 page should be placed last, so it only takes effect when no other routes match.
## How to Pass Parameters via Routes
### 1. Using "?" to Pass Parameters
```
http://localhost:3000/product?id=5
```
### 2. Using Route Segments to Pass Parameters
```
http://localhost:3000/product/123456
```
### Getting Route Parameters via `RouteComponentProps`
```
import React from "react";
import { RouteComponentProps } from "react-router-dom";
interface MatchParams {
touristRouteId: string;
}
export const DetailPage: React.FC> = (
props
) => {
// console.log(props.history);
// console.log(props.location);
// console.log(props.match);
return 路游路線詳情頁面, 路線ID: {props.match.params.touristRouteId} ;
};
```
### Getting Route Parameter Info Across Components
When using React Router components, `match`, `history`, and `location` are available by default in the props of child components. However, if you need to pass this information across components:
* Use App Context (you can refer to previous notes)
* HOC (Higher-Order Components)
```
import React,{Component} from 'react'
import {withRouter} from 'react-router-dom'
class App extends Component{
console.log(this.props); // {match: {…}, location: {…}, history: {…}, 等}
render(){return (
)
}
}
export default withRouter(App); // 這里透遛WithRouter將路由參數傳入props中
```
* Use a Hook function to get them (a simplified way)
```
import { useHistory, useLocation, useParams, useRouteMatch } from "react-router-dom";
const history = useHistory();
const location = useLocation();
const { touristRouteId }: MatchParams = useParams();
const match = useRouteMatch();
```
## Navigation
There are two main ways to navigate in React:
### 1. `history.push`
```
history.push("signIn")}>登入
```
### 2. Using the `Link` Component (a wrapper for an `` tag + `history.push`)
```
, with built-in colorful / sketch themes, pan & zoom, in-diagram search, and high-res SVG / PNG export. Lightweight, SSR-safe, fully typed. Free and open source (MIT).
- [Jira / Confluence Super Mermaid](https://blog.markkulab.net/en/tools/jira-super-mermaid): An Atlassian Forge app: write Mermaid syntax directly inside a Jira issue or a Confluence page and get flowcharts, sequence diagrams, state machines and Gantt charts. 11 diagram types, SVG / PNG export, light and dark themes, full CJK support. Runs on Atlassian: your diagrams live in your own site and the app calls no third-party service. Free, coming soon to the Atlassian Marketplace.
- [Mermaid Live Preview](https://blog.markkulab.net/en/tools/mermaid-preview): Write Mermaid in your browser, see it render instantly, and share the whole diagram as a single link. No sign-up, nothing uploaded to a server, and mermaid.live share links work as-is.
- [React Intl Phone Number](https://blog.markkulab.net/en/tools/react-intl-phone-number): react-intl-phone-number is an open-source React component: framework-agnostic and antd-free, with E.164 in/out, a searchable flag / country-code dropdown, configurable validation levels (strict / mobile-strict / loose), themeable CSS, and i18n — phone logic powered by google-libphonenumber. Lightweight and fully typed. Free and open source (MIT).
- [Uptime Kuma Cluster](https://blog.markkulab.net/en/tools/uptime-kuma-cluster): Turn single-node Uptime Kuma into a highly available cluster: OpenResty + Lua smart load balancing, shared MariaDB state, health checks and automatic failover, plus cluster-management REST APIs. One Docker Compose command to start. Free and open source (MIT).
- [Special Education](https://blog.markkulab.net/en/education): Learning materials crafted for special education students
### Daily podcasts
- [Mark's Tech Insights — Daily AI News](https://blog.markkulab.net/en/category/tech-news): Daily curated AI and tech trends. Catch the latest developments via audio summaries — covering AI applications, software architecture, DevOps, and engineering practice. — RSS: https://blog.markkulab.net/feed.xml
- [AI股市蝦聊](https://blog.markkulab.net/en/category/ai-stock-chat): Every trading day, an AI-analyzed take on the Taiwan stock market, delivered as a two-host conversation covering the session and the next-day outlook. — RSS: https://blog.markkulab.net/ai-stock-chat/feed.xml
- [開源好物週報](https://blog.markkulab.net/en/category/open-source-weekly): A weekly two-host pick of free open-source tools surfaced from real Hacker News, GitHub, and Reddit buzz — what pain they solve and the fastest way to get started. — RSS: https://blog.markkulab.net/open-source-weekly/feed.xml
### Newsletter
[Subscribe to the newsletter](https://blog.markkulab.net/en/subscribe) — Be the first to know about new posts. No spam, unsubscribe anytime.