React-Router 组件配置

热度 ℃

很多程序员喜欢把路由配置集中到一个地方，但路由的配置其实只是普通的数据，在把数据映射到组件上这方面，React 非常强大，Route 其实就是一个普通的组件。

1
2
3
4
5
6
const RouteWithSubRoutes = (route) => (
    <Route path={route.path} render={props => (
    // 把 routes 向下传递来达到嵌套。route.component 将得到 routes 属性。
    <route.component {...props} routes={route.routes}/>
  )}/>
)

把 Route 组件像这样包一层，然后在需要使用 Route 的地方使用 RouteWithSubRoutes 子路由可以加到任意路由组件上。

定义组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const Redbull = () => <h2>红牛</h2>
const Snacks = ({routes}) => (
    <div>
        <h2>小吃</h2>
        <ul>
            <li><Link to="/snacks/spicy">辣条</Link></li>
            <li><Link to="/snacks/chips">薯片</Link></li>
        </ul>
        {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route}/>
        ))}
    </div>
)
const Spicy = () => <h3>辣条</h3>
const Chips = () => <h3>薯片</h3>

路由配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const routes = [
    {
        path: '/redbull',
        component: Redbull
    },
    {
        path: '/snacks',
        component: Snacks,
        routes: [
            {
                path: '/snacks/spicy',
                component: Spicy
            },
            {
                path: '/snacks/chips',
                component: Chips
            }
        ]
    }
]

上面的路由配置定义了 4 个组件及其路径信息，其中组件 Snacks 下面还有两个子组件 Spicy 和 Chips。

Router

1
2
3
4
5
6
7
8
9
10
11
12
<Router>
    <div>
        <ul>
            <li><Link to="/snacks">小吃</Link></li>
            <li><Link to="/redbull">红牛</Link></li>
        </ul>
        {routes.map((route, i) => (
            <RouteWithSubRoutes key={i} {...route}/>
        ))}
    </div>
</Router>

流程分析

routes 数组中定义了两个一级组件 Redbull 和 Snacks，使用 RouteWithSubRoutes 实际上就是把这两个组件给定义了。

1
2
3
4
5
6
<Route path='/redbull' render={(props)=>{
	return <Redbull {...props}/>
}}/>
<Route path='/snacks' render={(props)=>{
	return <Snacks {...props} routes={routes.routes}/>
}}/>

同时该组件中又使用了 routes 属性来定义子组件。