React-router（11）路由配置_react

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: '第二個路由'    }]

解釋： component 是組件； path 是該組件對應的 url； name 非必須，這裡是為了省事，自動產生 Link 標籤的標題文字才加的； routes 可選，是該組件的子組件路由資訊。具體來說，就是將這個值傳給路由的子組件，然後子組件就可以拿這個產生自己的子路由資訊了；

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

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

這個函數幹了三件事： 建立了一個 Router 標籤； 根據 routes （來源於上面的路由配置表），自動產生了多個 Link 標籤； 以及多個 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 標籤。

簡單總結一下上面的過程： 調用函數 createRouter ，傳參 路由配置表； createRouter 函數會調用 自動產生 Link 標籤 和 自動產生 Route 標籤的函數； createLink 函數，根據路由配置表，自動產生了當前層級的 Link 標籤； createRoute 函數，根據路由配置表，自動產生了當前層級的 Route 標籤； createRoute 函數，假如路由配置表某個對應組件，有 routes 屬性，則自動將這個屬性的值，傳給了該組件，於是該組件可以拿到自己的，這一層級的子組件路由配置表；