windsuzu / react-router-demo Goto Github PK

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

這個專案主要展示如何使用 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 差別。

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

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

• Link
• NavLink with active style

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

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

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

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

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

• Maximilian Schwarzmüller