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 <div>写文章页面</div>
        } else {
            return <Redirect to='/login' />
        }
    }
}

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 (
    <Provider store={store}>
      <BrowserRouter>
        <div>
          <Header />
          <Route path='/' exact component={Home}></Route>
          <Route path='/login' exact component={Login}></Route>
          <Route path='/write' exact component={Write}></Route>
          <Route path='/detail/:id' exact component={Detail}></Route>
        </div>
      </BrowserRouter>
    </Provider >
  );
}

export default App;

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

//===>src/common/header/index.js
...
<Addition>
                            <Link to='/write'>
                                <Button className='writting'>
                                    <span className="iconfont">&#xe6e5;</span>写文章
                                </Button>
                            </Link>
                            <Button className='reg'>注册</Button>
                        </Addition>
...

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

异步组件及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 <div>正在加载</div>
    }
});

export default () => <LoadableComponent />

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组件的功能。