React服务端渲染探秘: 6.多级路由渲染(renderRoutes)

如今将routes.js的内容改变以下:

import Home from './containers/Home';
import Login from './containers/Login';
import App from './App'

//这里出现了多级路由
export default [{
  path: '/',
  component: App,
  routes: [
    {
      path: "/",
      component: Home,
      exact: true,
      loadData: Home.loadData,
      key: 'home',
    },
    {
      path: '/login',
      component: Login,
      exact: true,
      key: 'login',
    }
  ]
}]

复制代码

如今的需求是让页面公用一个Header组件，App组件编写以下:

import React from 'react';
import Header from './components/Header';

const  App = (props) => {
  console.log(props.route)
  return (
    <div> <Header></Header> </div>
  )
}

export default App;
复制代码

对于多级路由的渲染，须要服务端和客户端各执行一次。 所以编写的JSX代码都应有所实现：

//routes是指routes.js中返回的数组
//服务端:
<Provider store={store}>
  <StaticRouter location={req.path} >
    <div>
      {renderRoutes(routes)}
    </div>
  </StaticRouter>
</Provider>

//客户端：
<Provider store={getClientStore()}>
  <BrowserRouter>
  <div>
    {renderRoutes(routes)}
  </div>
  </BrowserRouter>
</Provider>
复制代码

这里都用到了renderRoutes方法，其实它的工做很是简单，就是根据url渲染一层路由的组件(这里渲染的是App组件)，而后将下一层的路由经过props传给目前的App组件，依次循环。

那么，在App组件就能经过props.route.routes拿到下一层路由进行渲染:

import React from 'react';
import Header from './components/Header';
//增长renderRoutes方法
import { renderRoutes } from 'react-router-config';

const  App = (props) => {
  console.log(props.route)
  return (
    <div> <Header></Header> <!--拿到Login和Home组件的路由--> {renderRoutes(props.route.routes)} </div>
  )
}

export default App;
复制代码

至此，多级路由的渲染就完成啦。