前端

React+Koa服务端渲染(SSR同构),客户端入口文件

2019-08-07聚力创意

// client/index.js

import React from 'react'
import ReactDom from 'react-dom'
import {BrowserRouter} from 'react-router-dom'
import {renderRoutes} from 'react-router-config'
import {Provider} from 'react-redux'
import routes from '../routes'
import {getClientStore} from '../store'
import '../assets/styles/index.scss'
import VConsole from 'vconsole'

const isDev = process.env.NODE_ENV === 'development'

if (isDev) {
  new VConsole()
}

const store = getClientStore()

const App = () => {
  return (
    <Provider store={store}>
      <BrowserRouter>
        {renderRoutes(routes)}
      </BrowserRouter>
    </Provider>
  )
}

ReactDom.hydrate(
  <App />,
  document.getElementById('root')
)
// routes.js

import React from 'react'
import Layout from './layouts/Layout'
import Home from './views/Home'
import NotFound from './views/NotFound'

const routes = [
  {
    component: Layout,
    routes: [
      {
        path: '/',
        component: Home,
        exact: true,
        loadData: Home.loadData,
        key: 'home'
      },
      {
        component: NotFound,
        loadData: NotFound.loadData,
        key: 'notfound'
      }
    ]
  }
]

export default routes
蜀ICP备17044229号