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;
複製代碼

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