리액터 라우터 | 구성 요소가 렌더링되지 않습니다.

Question

여러 경로가있는 SPA가 있습니다. Webpack 2 및 React Router 4를 사용하는 경로를 기반으로 코드 분할을 구현하려고합니다. 경로를 기반으로 다른 청크를 만들 수 있습니다. 예를 들어 홈페이지의 경우 vendor.js, main.js 및 home.js입니다. 세 파일 모두 성공적으로로드되지만 출력이 표시되지 않습니다. null이 렌더링 중입니다. 아래는 React developer 도구 및 사용 된 코드의 스크린 샷입니다. 내가 여기서 무엇을 놓치고 있는지 알고 있니?

응용 프로그램 구성 요소/App.js

import React, { Component } from 'react'; 
import { BrowserRouter, Route, Switch } from 'react-router-dom'; 
import NotificationContainer from '../containers/NotificationContainer'; 

class App extends Component { 
    constructor(props) { 
     super(props); 
    } 

    render() { 
     return (
      <div> 
       <NotificationContainer /> 
       <BrowserRouter> 
        <Switch> 
         <Route 
          exact 
          path="/" 
          getComponent={(nextState, callback) => { 
           // import('./homepage/index').then(module => callback(null, module.default)); 
           require.ensure(
            [], 
            require => { 
             callback(null, require('./homepage/index').default); 
            }, 
            'home' 
           ); 
          }} 
         /> 
         <Route 
          path="/login" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['../containers/LoginContainer'], 
            require => { 
             require('../containers/LoginContainer'); 
            }, 
            'login' 
           ); 
          }} 
         /> 
         <Route 
          path="/forgetPassword" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['../containers/ForgetPasswordContainer'], 
            require => { 
             require('../containers/ForgetPasswordContainer'); 
            }, 
            'forgetPassword' 
           ); 
          }} 
         /> 
         <Route 
          path="/generateNewPassword" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['../containers/GenerateNewPasswordContainer'], 
            require => { 
             require('../containers/GenerateNewPasswordContainer'); 
            }, 
            'generateNewPassword' 
           ); 
          }} 
         /> 
         <Route 
          path="/signup" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['../containers/SignupContainer'], 
            require => { 
             require('../containers/SignupContainer'); 
            }, 
            'signup' 
           ); 
          }} 
         /> 
         <Route 
          path="/contact" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['./Contact'], 
            require => { 
             require('./Contact'); 
            }, 
            'contact' 
           ); 
          }} 
         /> 
         <Route 
          path="/tech" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['./Tech'], 
            require => { 
             require('./Tech'); 
            }, 
            'tech' 
           ); 
          }} 
         /> 
         <Route 
          path="/error" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['./Error'], 
            require => { 
             require('./Error'); 
            }, 
            'error' 
           ); 
          }} 
         /> 
         <Route 
          path="/user/dashboard" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['../containers/DashBoardContainer'], 
            require => { 
             require('../containers/DashBoardContainer'); 
            }, 
            'dashboard' 
           ); 
          }} 
         /> 
         <Route 
          path="/movie/:movieId" 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['../containers/MovieContainer'], 
            require => { 
             require('../containers/MovieContainer'); 
            }, 
            'movieContainer' 
           ); 
          }} 
         /> 
         <Route 
          getComponent={(nextState, callback) => { 
           require.ensure(
            ['./Error'], 
            require => { 
             require('./Error'); 
            }, 
            'error' 
           ); 
          }} 
         /> 
        </Switch> 
       </BrowserRouter> 
      </div> 
     ); 
    } 
} 

export default App; 

웹팩 구성

const webpack = require('webpack'); 
var BundleTracker = require('webpack-bundle-tracker'); 
var BundleAnalyzer = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; 

module.exports = { 
    entry: './src/index.js', 
    output: { 
     path: __dirname + '/public/assets/js', 
     filename: '[name].js', 
     chunkFilename: '[name].js', 
     publicPath: 'assets/js/' 
    }, 
    plugins: [ 
     new BundleTracker({ filename: './webpack-stats.json' }), 
     new webpack.DefinePlugin({ 
      'process.env': { 
       NODE_ENV: JSON.stringify('production') 
      } 
     }), 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'vendor', 
      filename: '[name].js', 
      minChunks: module => /node_modules/.test(module.resource) 
     }), 
     new webpack.LoaderOptionsPlugin({ 
      minimize: true, 
      debug: false 
     }), 
     new webpack.optimize.UglifyJsPlugin({ 
      beautify: false, 
      mangle: { 
       screw_ie8: true, 
       keep_fnames: true 
      }, 
      compress: { 
       screw_ie8: true, 
       warnings: false 
      }, 
      comments: false 
     }), 
     new BundleAnalyzer({ analyzerMode: 'static' }) 
    ], 
    resolve: { 
     modules: ['node_modules'], 
     extensions: ['*', '.js', '.jsx'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       loader: 'babel-loader', 
       options: { 
        plugins: [ 
         [ 
          'transform-semantic-ui-react-imports', 
          { 
           convertMemberImports: true, 
           addCssImports: false, 
           importMinifiedCssFiles: false, 
           addLessImports: false, 
           addDuplicateStyleImports: false 
          } 
         ] 
        ], 
        presets: [['es2015', { modules: false }], 'react', 'stage-2', 'node6'] 
       } 
      } 
     ] 
    }, 
    node: { 
     console: true, 
     fs: 'empty', 
     net: 'empty', 
     tls: 'empty' 
    } 
}; 

홈 구성 요소 | 구성 요소가 경로에 반환되지 않도록 홈페이지 /하는 index.js

import React, { Component, PropTypes } from 'react'; 
import LayoutContainer from '../../containers/LayoutContainer'; 
import Hero from './Hero'; 
import About from './About'; 
import Working from './Working'; 

class Homepage extends Component { 
    render() { 
     return (
      <LayoutContainer scrollBound={600}> 
       <div className="homepage-container"> 
        <p>Here</p> 
        <Hero /> 
        <About /> 
        <Working /> 
       </div> 
      </LayoutContainer> 
     ); 
    } 
} 

export default Homepage; 

Answer 1

react-router에 대한 설명서가 큰 지방 거짓말 쟁이가 아닌 경우는, 루트에 대한-이상 getComponent 방법이 없습니다. 자신의 게으른 로딩 구성 요소를 롤링하는 것은 그렇게 나쁘지 않습니다. 좀 더 이국적인 라우터를 위해 하나를해야만했으며,이 접근법은 react-router@4에도 적용됩니다. 먼저, 간단한 HOC 만들 :

export default function DeferredComponent(loadingFn) { 
    return class DeferredComponentInstance extends React.Component { 
    constructor() { 
     super(...arguments); 
     this.state = { 
     InnerComponent: Spinner 
     }; 
    } 

    componentDidMount() { 
     loadingFn((err, component) => { 
     if (err) { 
      throw err; // Maybe render an error component instead? 
     } 

     this.setState({ InnerComponent: component }); 
     }); 
    } 

    render() { 
     const { InnerComponent } = this.state; 
     return <InnerComponent { ...this.props }/>; 
    } 
    }; 
} 

을 ... 그리고 지금 당신은 다음과 같이 사용할 수 있습니다 :

<Route 
    path="/login" 
    component={DeferredComponent(cb => { 
    require.ensure(['../containers/LoginContainer'], require => { 
     cb(null, require('../containers/LoginContainer').default); 
    }); 
    })} 
/> 

나는`/`여전히 홈 경로에서 같은`널 (null)에 콜백을 호출하고

Answer 2

당신은, 모든 경우에 callback를 호출하지 않습니다. 예를 들어,이 :

<Route 
    path="/login" 
    getComponent={(nextState, callback) => { 
    require.ensure(['../containers/LoginContainer'], require => { 
     require('../containers/LoginContainer'); 
    }, 'login'); 
    }} 
/> 

...해야한다 :

<Route 
    path="/login" 
    getComponent={(nextState, callback) => { 
    require.ensure(['../containers/LoginContainer'], require => { 
     callback(null, require('../containers/LoginContainer')); 
    }, 'login'); 
    }} 
/>