React-router（11）路由配置

11、路由配置

DEMO地址

參考 9.routeConfigTable.js

簡單來說，就是有一個對象，如下：

const RouteConfig = [
    {
        path: 'first',
        component: First,
        name: '第一個路由',
        routes: [
            {
                path: '1',
                component: ChildOne,
                name: '1-1'
            }
        ]
    },
    {
        path: 'second',
        component: Second,
        name: '第二個路由'
    }
]

解釋：

1. component 是組件；
2. path 是該組件對應的 url；
3. name 非必須，這裏是爲了省事，自動生成 Link 標籤的描述文字才加的；
4. routes 可選，是該組件的子組件路由信息。具體來說，就是將這個值傳給路由的子組件，然後子組件就可以拿這個生成自己的子路由信息了；

單純看這個比較麻煩，我們先來看一個函數吧：

const createRouter = (routes, props) => (
    <Router>
        <div>
            {/* 自動生成 Link 標籤 */}
            {createLink(routes, props)}
            <hr/>
            {/* 自動生成 Route 標籤 */}
            {createRoute(routes, props)}
        </div>
    </Router>
)
createRouter(RouteConfig, props)

這個函數幹了三件事：

1. 創建了一個 Router 標籤；
2. 根據 routes （來源於上面的路由配置表），自動生成了多個 Link 標籤；
3. 以及多個 Route 標籤；

預期上，這兩個生成標籤的函數，他們生成的 Link 標籤和 Route 標籤是一一對應的；

---

然後我們再分別看這兩個生成函數，先看第一個生成 Link 標籤的：

const createLink = (routes, props) => (
    <ol>
        {
            routes.map(route => (
                <li key={route.path}>
                    <Link to={`${props.match.url}/${route.path}`}>{route.name}</Link>
                </li>
            ))
        }
    </ol>
)

注意，createLink 傳入的第一個參數，是一個數組（參考上面的 RouteConfig 變量）；

遍歷這個數組，生成一個 li 標籤，內包裹一個 Link 標籤，其 to 屬性是當前 url（props.match.url），後面加上路由路徑 route.path，描述文字就是 route.name。

示例（map 返回數組的一個元素）：

<li key='first'>
    <Link to={`/first`}>第一個路由</Link>
</li>

最後結果就是自動生成了導航欄。

---

然後我們再看另外一個生成 Route 標籤的函數：

const createRoute = (routes, props) => (
    <React.Fragment>
        {routes.map((route, i) => {
            let obj = {
                key: i,
                ...route,
                path: `${props.match.url}/${route.path}`,
                component: props => {
                    let obj = {routes: route.routes, ...props}
                    return <route.component {...obj}/>
                }
            }
            return <Route {...obj}/>
        })}
    </React.Fragment>
)

懂了上面那個後，這個自然而言也很容易懂了。

遍歷 routes ，取出 component 屬性（即該路徑對應的組件），

將當前子路由的路由配置表，如下：

routes: [
    {
        path: '1',
        component: ChildOne,
        name: '1-1'
    }
]

混合到路由信息裏（見 obj.component 屬性，如果看不懂，請參考上面【7】中，component 的屬性是一個函數的那個示例）。

這樣，對應的子組件，就可以拿到路由配置表中，該組件的子路由信息了。

具體舉例來說，就是 First 這個組件，可以從 props 裏取出以下數據：

routes: [
    {
        path: '1',
        component: ChildOne,
        name: '1-1'
    }
]

因此，子組件可以繼續調用上面兩個函數，來自動生成 Link 標籤，和 Route 標籤。

---

簡單總結一下上面的過程：

1. 調用函數 createRouter ，傳參 路由配置表；
2. createRouter 函數會調用 自動生成 Link 標籤 和 自動生成 Route 標籤的函數；
3. createLink 函數，根據路由配置表，自動生成了當前層級的 Link 標籤；
4. createRoute 函數，根據路由配置表，自動生成了當前層級的 Route 標籤；
5. createRoute 函數，假如路由配置表某個對應組件，有 routes 屬性，則自動將這個屬性的值，傳給了該組件，於是該組件可以拿到自己的，這一層級的子組件路由配置表；