reactjs - React router 4 - 路由+代码分割，使用 webpack 1.9

Question

我正在尝试升级已有 2 年历史的 React 代码库以使用最新的 React 和 React-router。我根本没有接触过 webpack 配置，我想我也不需要这样做。我是 react 世界的新手，所以请耐心等待。我有几个问题将合并到这一个问题中，因此它会相当长。

1. bundle :

webpack 配置加载一个 js 文件作为入口点。

var entry = { appBundle : ["./src/index.js"] }

在index.js中，我们正在做类似的事情:

var mainRoutes = {
    component: "div",
    childRoutes: [
    {
       path: "/",
       component: require("./components/LandingPage.jsx"),
       childRoutes: [
            require("./components/dashboard"),
            ..
            ..
       ]
    }
}

然后，

React.render(
   React.createElement(Router, { history: browserHistory, routes: mainRoutes }),
   document.getElementById("app-container")
 );

我保持入口点不变，但我将 index.js 的内容更改为:

ReactDOM.render((
   <BrowserRouter>
     <LandingPage />
   </BrowserRouter>
 ), document.getElementById("app-container"));

在 LandingPage.jsx 中，我定义了所有顶级路由，如下所示:

render() {
    return (     
      <main>
        <Switch>
          <Route path='/dashboard' component={Dashboard}/>
           ..
        </Switch>
      </main>
     );
  }

路由工作正常，一切正常。但我看到的区别是 webpack 过去常常发出类似的东西:

    Asset              Size                 Chunks           Chunk Names
                                            14 
    appBundle.js       xxx kB               0                appBundle
    dashboard.js       xxx kB               1                dashboard

.. and so on for most components

但现在是:

Asset              Size                 Chunks           Chunk Names
                                        1 
appBundle.js       xxx kB               0                appBundle

所以问题1:我是否缺少一些用于像以前一样创建 bundle 的配置？

获取组件

在每个组件文件夹中，我们都有一个 index.js 文件，其内容如下:

"use strict";

 module.exports = {
   path: "dashboard",

   getComponents(location, cb) {
     require.ensure([], (require) => {
       cb(null, require("./Dashboard.jsx"));
     }, "dashboard");
   }
 };

我知道 React Router v4 不再支持 getComponents。这段代码是否异步加载组件(并且创建了不同的包？)？

问题2:应该用什么替换 getComponents 和 index.js 文件？

嵌套路由

React router 4 不支持嵌套路由，我应该在需要嵌套路由的地方添加组件。但我不确定在哪里。比如说，我们的组件看起来像这样:

"use strict";

 // import stuff
 class DashboardContainer extends React.Component {
   render() {
     return (
       <Dashboard {...this.props} />
     );
   }
 }

 class Dashboard extends React.Component {     
   render() {
     return (
       <div></div>
       <SomeOtherComponent/>
     );
   }
 }

 export default DashboardContainer;

我将其更改为(所有其他代码相同)

class Dashboard extends React.Component {     
       render() {
         return (
           <div>
               <div></div>
               <SomeOtherComponent/>
               <Route path='/childComponent' component={ChildComponent}/>
           </div>
         );
       }
     }

但是子组件不会渲染。

Q3:我需要在哪里定义子/嵌套组件路由？

如果需要更多信息，请告诉我。谢谢。

Answer 1

A1: 这就是所谓的代码分割。我不太熟悉它，但一般概念是将主要组件分成单独的包，以提高应用程序的加载速度。这个article很好地解释了它如何与旧的 React-router 版本一起使用。

此外，新的 react-router-dom 中有一个小指南文档也讨论了 v4 中的代码分割。

A2/A3:正如您所提到的，v4 确实改变了我们渲染路线的方式。随着更多动态路由和 Switch 等新组件的推出，我们现在必须在每个嵌套路由的父组件内完成所有嵌套路由。例如，您可以执行以下操作:

Main.js

ReactDOM.render((
  <BrowserRouter>
    <App/>
  </BrowserRouter>
), el)

首先，我们声明 BrowserRouter 组件来处理浏览器历史记录以保持 UI 同步。

App.js

const App = () => (
  <div>
    <Nav />

    <Switch>
      <Route exact path="/" component={Home}/>
      <Route path="/dashboard" component={Dashboard}/>
    </Switch>

    <Footer />
  </div>
)

其次，我们在 App 容器中声明主 switch 语句，它将处理所有父路由的路由。

仪表板.js

const Dashboard = () => (
  <div>
    <h1>Welcome to the Dashboard!</h1>
    <Switch>
      <Router exact path="/dashboard component={MainView}/>
      <Route path="/dashboard/child-one" component={MainChildOne}/>
      <Route path="/dashboard/child-two" component={MainChildTwo}/>
    </Switch>
  </div>
)

最后，在父路由中，我们声明另一个 switch 语句，它将处理父路由中的所有嵌套子路由。

祝你好运!