javascript - React - 如何处理多个部分的网站？如何扩展 react 应用程序？

Question

我刚刚开始使用react-create-app 进行 react 。 我制作了一个小型应用程序，并且知道我在将网站拆分为不同部分时遇到了困难。

我正在为 html5 游戏制作一个网站。 我用 React 制作了应用程序的快速原型(prototype)(玩家可以在其中看到其他连接的玩家、开始游戏等......)。例如，为了连接玩家，我只是使用 axios 从 JAVA spring 服务器获取数据。

但是假设我想在此应用程序之前创建一个欢迎/登录页面。 Like this 此页面的内容是“看看这个很酷的游戏，立即注册!”。

我应该如何用 react 来做到这一点？我应该使用 React Router 吗？ 也许稍后我想添加一个 DevBlog ？也许是论坛？ ...我不希望想要查看开发博客的人从论坛下载所有资源。

如何轻松扩展我的小应用程序？

我迷失了自己，似乎有很多方法!创建并行节点服务器？使用服务器端渲染？下一个JS？终极版？路由器？

对于独自工作的人来说，最好的选择是什么？

Answer 1

您可以使用react-router和所谓的异步路由。 Webpack 允许您使用 require.ensure 为每个路由创建多个分割点。

最终得到的不是一个巨大的 js/css 文件，而是多个(任意数量)文件，当用户输入某一路径时，这些文件会异步下载。

import { injectReducer } from '../../store/reducers'

export default (store) => ({
  path : 'forum',
  /*  Async getComponent is only invoked when route matches   */
  getComponent (nextState, cb) {
    /*  Webpack - use 'require.ensure' to create a split point
        and embed an async module loader (jsonp) when bundling   */
    require.ensure([], (require) => {
      /*  Webpack - use require callback to define
          dependencies for bundling   */
      const Counter = require('./containers/ForumContainer').default
      const reducer = require('./modules/forum').default

      /*  Add the reducer to the store on key 'forum'  */
      injectReducer(store, { key: 'forum', reducer })

      /*  Return getComponent   */
      cb(null, Forum)

    /* Webpack named bundle   */
    }, 'forum')
  }
})

因此，通过上述配置，当有人进入 yourawesomepage.com/forum 时，会下载必要的文件，并且还会注入(inject)负责论坛的 reducer (来自 redux)。

This是一个开箱即用的小型入门包，具有此功能。