React-router(11)路由配置
阿新 • • 發佈:2019-01-22
11、路由配置
參考 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 屬性,則自動將這個屬性的值,傳給了該元件,於是該元件可以拿到自己的,這一層級的子元件路由配置表;