React Router Demo

A comprehensive demo showing the use of react-router-dom v6.
View Demo · Report Bug · Request Feature

Table of Contents

• About
• Examples
  • 🪃 Setup Routes
  • ⚔️ Nested Routes
  • 🗡️ Using Links and NavLinks
  • 🛡️ Extracting URL Params (useLocation, useParams)
  • 🩸 Redirect, Navigation, Imperative Navigation
• Preview
• Difference between v5 and v6
  • ❤️ Browser Router
  • ❤️ Routes and Route Components
  • ❤️ Display Subroute
  • ❤️ NavLink Active Status
  • ❤️ useParams
  • ❤️ Redirect => Navigate
  • ❤️ Route inside Components
  • 🎆 Outlet (v6 only)
  • ❤️ Imperative Navigation
• License
• Contact
• Acknowledgements

---

About

這個專案主要展示如何使用 react-router-dom@v6 讓一個 SPA (Single-Page Application) 專案能夠自由控制 url 與頁面轉換。內容包含:

1. 建立 Routes 邏輯
2. 建立 Link 或含有 active 風格的 NavLink
3. 在 component 中建立 nested routes
4. 利用 useParams 與 useLocation、URLSearchParams 存取 url 資訊
5. 利用 navigate 與 useNavigate 來改變 url，做到 replace 或 push 頁面，甚至使用 url 取代 state 功能

❤️ 另外，下方的 [Difference between v5 and v6] 區塊也整理了 react-router-dom 的 v5 和 v6 差別。

Built With HTML5, CSS3, Javascript ES6 React.js styled-components react-router-dom@v6 [DEMO] : https://windsuzu.github.io/react-router-demo

---

Examples

🪃 Setup Routes

• setup <BrowserRouter>
• setup <Routes> and element
• setup NotFound page

⚔️ Nested Routes

• setup route with *
• implement <Routes> in components

🗡️ Using Links and NavLinks

• Link
• NavLink with active style

🛡️ Extracting URL Params (useLocation, useParams)

• use url search params to replace states
• use url params to replace props

🩸 Redirect, Navigation, Imperative Navigation

• use <Navigate replace> to redirect users
• use useNavigate to redirect users
• push url to change states

Preview

---

Difference between v5 and v6

❤️ Browser Router

❤️ Routes and Route Components

❤️ Display Subroute

❤️ NavLink Active Status

❤️ useParams

❤️ Redirect => Navigate

❤️ Route inside Components

🎆 Outlet (v6 only)

❤️ Imperative Navigation

License

Distributed under the MIT License. See LICENSE for more information.

Contact

Reach out to the maintainer at one of the following places:

• GitHub discussions
• The email which is located in GitHub profile

Acknowledgements

• Maximilian Schwarzmüller