react項目—路由和嵌套子路由（react-router4.0）

路由的問題一直疑惑，試着找百度上面的博客做一遍，心里有數了。

1、安裝相關的包：

（1）npm install --save-dev react-router

（2）npm install --save-dev react-router-dom

（3）npm install --save react-router-config

在package.json中查看版本

2、配置路由

（1）新建路由文件 routes.js

          在src目錄下建routes.js

代碼如下所示：

 

 

注：（1）exact:

                是Route下的一條屬性，一般而言，react路由會匹配所有匹配到的路由組價，exact能夠使得路由的匹配更嚴格一些。

                值為bool型，為true是表示嚴格匹配，為false時為正常匹配。

                如在exact為true時，’/link’與’/’是不匹配的，但是在false的情況下它們又是匹配的。

       （2）嵌套子路由children，這里說明一下不一定必須用children，你可以用其它的詞代替。但是我個人覺得，children辨識度                  高，在后面使用的時候也不會搞混。

（2）index.js文件

 

 

（3）組件中使用

1.  
   import React from 'react';
2.  
   import { Link } from 'react-router-dom';
3.  
    
4.  
   export default class NavigationBar extends React.Component {
5.  
   constructor(props) {
6.  
   super(props);
7.  
   this.state = {}
8.  
   }
9.  
    
10.  
    render (){
11.  
    return(
12.  
    <div>
13.  
    <ul>
14.  
    <li>
15.  
    <Link to="/">首頁</Link>
16.  
    </li>
17.  
    <li>
18.  
    <Link to="/advantage">advantage</Link>
19.  
    </li>
20.  
    </ul>
21.  
    </div>
22.  
    )
23.  
     
24.  
    }
25.  
    }

子路由（子頁面）：

1.  
   import React from 'react';
2.  
   import { Link } from 'react-router-dom';
3.  
   import { renderRoutes } from 'react-router-config'
4.  
    
5.  
   export default class FyAdvantage extends React.Component {
6.  
   constructor(props) {
7.  
   super(props);
8.  
   this.state = {
9.  
   route: props.route,
10.  
    }
11.  
    }
12.  
     
13.  
    render (){
14.  
    const route = this.state.route;
15.  
    return(
16.  
    <div>
17.  
    {renderRoutes(route.children)}
18.  
    <div>
19.  
    <ul>
20.  
    <li>
21.  
    <Link to="/advantage/advantage1">advantage1</Link>
22.  
    </li>
23.  
    <li>
24.  
    <Link to="/advantage/advantage2">advantage2</Link>
25.  
    </li>
26.  
    <li>
27.  
    <Link to="/advantage/advantage3">advantage3</Link>
28.  
    </li>
29.  
    </ul>
30.  
    </div>
31.  
    </div>
32.  
    )
33.  
    }
34.  
    }

注：（1）接受通過props傳過來的route

       （2）{renderRoutes(route.children)}是子頁面的入口，子頁面是在原來的頁面的基礎加載的，

                例：A是父頁面，B和C是A的子頁面。B、C是A的一部分，在加載B或C頁面的時候，父頁面A的內容依然存在，B或C                       的頁面內容通過入口渲染在A頁面中。