React ReduxのApp WrapperとしてのHOC

Question

それぞれのコンポーネントビューをラップするアプリHOCが必要でした。 このHOCはユーザーを認証し、Googleアナリティクスのトラッキングを設定します。 ルータ4にアップグレードしていて、動作させる際に問題があります。

TypeError: (0 , _AppWrapper2.default) is not a function 

そう私はHOCを作成していますどのように関連している -

はそれは私に次のエラーを与えています。 アイデア

routes.js

export default (
    <Switch> 
    <Route exact path="/" component={AppWrapper(Home)} /> 
    <Route exact path="/channels" component={AppWrapper(Channels)} /> 
</Switch> 

）。

const AppWrapper = (WrappedComponent) => { 
    return class AppWrapperComponent extends Component { 
    constructor(props) { 
    super(props); 
    } 

    componentDidMount() { 
     const page = this.props.location.pathname; 
     this.trackPage(page); 
    } 

    componentWillReceiveProps(nextProps) { 
     const currentPage = this.props.location.pathname; 
     const nextPage = nextProps.location.pathname; 

     if (currentPage !== nextPage) { 
     this.trackPage(nextPage); 
     } 
    } 

    trackPage = page => { 
     GoogleAnalytics.set({ 
     page, 
     ...options, 
     }); 
     GoogleAnalytics.pageview(page); 
    }; 

    render() { 
    return (
     <div> 
     {this.state.isMounted && !window.devToolsExtension && process.env.NODE_ENV === 'development' && <DevTools />} 
     <WrappedComponent {...this.props.chidren} /> 
     </div> 
    ); 
    } 
} 

Answer 1

AppWrapperをエクスポートしていないようです。あなたはimport {AppWrapper} from ..でそれをインポートする場合は、あなたが前exportを挿入することができます

export default AppWrapper; 

または

export default (WrappedComponent) => { .. 

でのconst宣言を置き換える：あなたはimport AppWrapper from ..でそれをインポートする場合は、AppWrapper.jsの終わりに、この行を追加します。 const：

export const AppWrapper = (WrappedComponent) => {