一、路由的嵌套

在開發中，路由之間是存在嵌套關系的。
這里我們假設about頁面中有三個頁面內容：

• 企業歷史、企業文化和聯系我們；
• 點擊不同的鏈接可以跳轉到不同的地方，顯示不同的內容；

二、手動路由跳轉

目前我們實現的跳轉主要是通過Link或者NavLink進行跳轉的，實際上我們也可以通過JavaScript代碼進行跳轉。 但是通過JavaScript代碼進行跳轉有一個前提：必須獲取到history對象。

如何可以獲取到history的對象呢？兩種方式

方式一：如果該組件是通過路由直接跳轉過來的，那么可以直接獲取history、location、match對象；

方式二：如果該組件是一個普通渲染的組件，那么不可以直接獲取history、location、match對象；

那么如果普通的組件也希望獲取對應的對象屬性應該怎么做呢？

• 前面我們學習過高階組件，可以在組件中添加想要的屬性；
• react-router也是通過高階組件為我們的組件添加相關的屬性的；

如果我們希望在App組件中獲取到history對象，必須滿足以下兩個條件：

• App組件必須包裹在Router組件之內；
  

• App組件使用withRouter高階組件包裹；
  
  

三、參數傳遞

傳遞參數有三種方式：

動態路由的方式；

search傳遞參數；

Link中to傳入對象；

動態路由的概念指的是路由中的路徑并不會固定：

• 比如/detail的path對應一個組件Detail；
• 如果我們將path在Route匹配時寫成/detail/:id，那么 /detail/abc、/detail/123都可以匹配到該Route，并且進行顯示；
• 這個匹配規則，我們就稱之為動態路由；
• 通常情況下，使用動態路由可以為路由傳遞參數。
  
  
  
  

search傳遞參數：

NavLink中to可以直接傳入一個對象：

四、react-router-config

目前我們所有的路由定義都是直接使用Route組件，并且添加屬性來完成的。
但是這樣的方式會讓路由變得非常混亂，我們希望將所有的路由配置放到一個地方進行集中管理：

• 這個時候可以使用react-router-config來完成；

安裝react-router-config：yarn add react-router-config

配置路由映射的關系數組

import Home from '../pages/home'; import About, { AboutHisotry, AboutCulture, AboutContact, AboutJoin } from '../pages/about'; import Profile from '../pages/profile'; import User from '../pages/user'; import Detail from "../pages/detail"; import Product from "../pages/product";const routes = [{path: "/",exact: true,component: Home},{path: "/detail/:id",exact: true,component: Detail},{path: "/about",component: About,routes: [{path: "/about",exact: true,component: AboutHisotry},{path: "/about/culture",component: AboutCulture},{path: "/about/contact",component: AboutContact},{path: "/about/join",component: AboutJoin},]},{path: "/profile",component: Profile},{path: "/user",component: User},{path: "/product",component: Product} ]export default routes;

使用renderRoutes函數完成配置

總結

以上是生活随笔為你收集整理的react-router的使用（三）——路由的嵌套的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。