因為本人也是react的初學者，也是在一遍摸索著一邊解決一些小的問題來分享出來，希望大家能共同交流。

接下來談一談react-router4中如何寫巢狀路由。因為在前幾篇部落格裡寫了用react-router實現單頁面跳轉，但是沒有測試巢狀路由，導致巢狀的部分無法實現正常跳轉，現已改正，並來說一說它的來龍去脈。

前言：本人用的react-router是4.3.1的版本，可以從package.json中去檢視專案安裝引用的包。

1、react-router3中，頁面的巢狀是通過<Route>標籤的巢狀實現的。正如我最開始寫的，利用Route標籤實現MyView和Mydocument兩個元件的巢狀。

但是上述的寫法在v4版本下執行時，位址列中的url會改變，但是元件不會顯示出來。

2、所以需要將上述寫法改成v4，React Router 4 不再提倡中心化路由。取之的是路由存在於佈局和 UI 之間。

router/index.js中：

component/MyView.js中

在V4版本中，也可以寫成中心化路由的形式，如下，注意外層標籤不再是v3版本中的<Route>，而是引入的元件名稱MyView，通過this.props.children屬性來獲取被巢狀的元件。

router/index.js：

component/MyView.js：