11、路由配置

參考 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 屬性，則自動將這個屬性的值，傳給了該元件，於是該元件可以拿到自己的，這一層級的子元件路由配置表；