react中异步组件以及withRouter的使用

左手的ㄟ右手 2022-01-09 04:55 243阅读 0赞

什么是异步组件？简单来说就是异步加载一个组件，正常情况浏览器加载的是我们打包好的bundle.js文件，那么这个文件是集合了所有js是代码，然而我们首屏加载并不需要一次性加载所有的组件，这会造成性能的损耗，所以我们可以使用异步组件，推荐使用（react-loadable）https://github.com/jamiebuilds/react-loadable，那么使用react-loadable就会造成路由跳转的问题，所以我们需要使用withRouter来解决，withRouter组件的功能是让当前组件有能力获取到所有的参数和内容

![1609589-20190405011805918-80447832.png][]

//首先要下载yarn add react-loadable
    //loadable.js文件
    import React from 'react';
    import Loadable from 'react-loadable';
    
    const LoadableComponent = Loadable({
      loader: () => import('./'),  //./需要异步的组件
      loading(){
        return <div>正在加载</div>
        //可以加载一些好看的loading
      }
    });
    
    export default () => <LoadableComponent/>;

//index.js文件
    import React, { Component } from 'react';
    import { withRouter } from 'react-router-dom';
    import { connect } from 'react-redux';
    
    class Detail extends Component{
        render(){
            console.log(this.props.match.params.id);  //这时候就可以获取到了，页面也不会报错了
            return(<div></div>);
        }
    }
    export default connect(mapState, mapDispatch)(withRouter(Detail));
    
    
    //路由部分
    import React, { Component } from 'react';
    import { BrowserRouter, Route } from 'react-router-dom';
    import { Provider } from 'react-redux';
    import store from './store';
    import Detail from './pages/detail/loadable.js';
    class App extends Component{
        render(){
            return(
                <Provider store={store}>
                    <BrowserRouter>
                        <div>
                            <Route path='/detail/:id' exact component={Detail}></Route>
                        </div>
                    </BrowserRouter>
                </Provider>
            );
        }
    }

转载于:https://www.cnblogs.com/lanshu123/p/10657783.html

[1609589-20190405011805918-80447832.png]: /images/20220109/26ee5f49b8394a168261c875e9d6177a.png