23 项目实战：详情页面和登录功能开发（四）

登陆鉴权及代码优化

我们来写右上角“写文章”功能的登录拦截
1.write组件

//===>src/pages/write/index.js
import React, { PureComponent } from 'react'
import { connect } from 'react-redux'
import { Redirect } from 'react-router-dom'

class Write extends PureComponent {
    render() {
        const { loginStatus } = this.props;
        if (loginStatus) {
            return 
写文章页面
        } else {
            return 
        }
    }
}

const mapState = (state) => ({
    loginStatus: state.getIn(['login', 'login'])
})


export default connect(mapState, null)(Write)

2.编写页面路由

//===>src/App.js
import React from 'react';
import Header from './common/header'
import store from './store'
import { Provider } from 'react-redux'
import { BrowserRouter, Route } from 'react-router-dom'
import Home from './pages/home';
import Detail from './pages/detail'
import Login from './pages/login'
import Write from './pages/write'
function App() {
  return (
    
      
        

          

          
          
          
          
        
      
    
  );
}

export default App;

3.在Header组件的“写文章”按钮编写跳转

//===>src/common/header/index.js
...

                            
                                
                                    写文章
                                
                            
                            注册
                        
...

我们实现了，点击右上角“写文章”，登陆状态则跳转到写文章页面，没有登陆的，跳转到登陆页面。

异步组件及withRouter路由方法的使用

之前我们写的组件，项目执行首页的时候，会加载出所有页面的js文件，这样很慢。我们希望只加载正在显示的页面的js文件，这要怎么弄呢？
我们以detail页面为例
1.引入第三方模块react-loadable
cnpm install --save react-loadable
2.在detail目录下新建loadable.js文件

//===>src/pages/detail/loadable.js
import React from 'react'
import Loadable from 'react-loadable';

const LoadableComponent = Loadable({
    loader: () => import('./'),
    loading() {
        return 
正在加载
    }
});

export default () => 

3.在App.js组件修改之前detail组件的导入位置

...
import Detail from './pages/detail/loadable.js'
...

4.第三步会带来一个问题，this.props.match.params.id失效了。为了解决这个问题，我们需要改下detail的index.js

//===>src/pages/detail/index.js
...
import {withRouter} from 'react-router-dom'
...
export default connect(mapState, mapDispatch)(withRouter(Detail))

这样就实现了，进入detail页面才加载detail组件的功能。