react-router4.x 实用例子(路由过渡动画、代码分割)

react-router4.x 实用例子(路由过渡动画、代码分割)

react-router4.2.0实用例子

1. 代码分割

   官网上面写的代码分割是不支持create-react-app脚手架的，要使用import实现
   创建一个bundle.js文件
       import { Component } from 'react'
       class Bundle extends Component {
           constructor(props) {
               super(props);
               this.state = {
                   mod: null
               };
           }
           componentWillMount() {
               this.load(this.props)
           }
           componentWillReceiveProps(nextProps) {
               if (nextProps.load !== this.props.load) {
                   this.load(nextProps)
               }
           }
           load(props) {
               this.setState({
                   mod: null
               });
               props.load().then((mod) => {
                   this.setState({
                       mod: mod.default ? mod.default : mod
                   });
               });
           }
           render() {
               return this.state.mod ? this.props.children(this.state.mod) : null;
           }
       }
       export default Bundle
   假设有一个自己的子组件需要代码分割
       demo.js
       import React from 'react'
       const MyComponent = () => (
           
   我是子组件
       )
       export default MyComponent;
   在需要代码分割的文件中导入这个Bundle
       import Bundle from './test.js'
       const MyComponent = (props) => (
            import('./demo.js')}>
               {(MyComponent) => }
           
       )
       只有当MyComponent在文件中使用到了，才会去异步加载需要的组件
   ** 补充
       如果你要和代码分割一起使用建议将Bundle.js文件修改成如下，如果不修改，亲测有bug
       import React, { Component } from 'react'
           class Bundle extends Component {
           constructor() {
               super()
               this.state = {
                   mod: null
               }
           }
           async componentDidMount() {
               const {default: mod} = await this.props.load()
               this.setState({
                   mod: mod.default || mod
               })
           }
           render() {
               return (
               this.state.mod ? this.props.children(this.state.mod) : null
               )
           }
       }
   
       export default Bundle

2. ScrollTop实现方式一

   默认情况下，react中的组件在路由之间切换时不会默认回到页面的最顶部，这时需要自己动手编写一个组件实现这个功能
   创建ScrollTop.js文件
       import { Component } from 'react'
       import { withRouter } from 'react-router'
       class ScrollToTop extends Component {
           componentDidUpdate(prevProps) {
               if (this.props.location !== prevProps.location) {
                   window.scrollTo(0, 0)
               }
           }
           render() {
               return this.props.children
           }
       }
       export default withRouter(ScrollToTop)
   使用
       import ScrollTop from './ScrollTop.js'
       将router内部的子元素全部使用ScrollTop包裹即可
       
           
               
   
                   
   
                       组件一
                       组件二
                   
                   
                   
               
           
       

3. ScrollTop实现方式二

   创建ScrollTop.js文件，添加如下内容
       import { Component } from 'react'
           import { withRouter } from 'react-router'
           class ScrollToTopOnMount extends Component {
           componentDidMount(prevProps) {
               window.scrollTo(0, 0)
           }
           render() {
               return null
           }
       }
       export default ScrollToTopOnMount
   使用
       import ScrollToTopOnMount from './scrollTop.js'
       将你原本的组件重新封装一个组件来使用即可
       class LongContent extends React.Component {
           render() {
               return (
                   
   
                       
                       
                   
               )
           }
       }   

4. 路由之间的动画切换

   结合react-transition-group插件使用，官方推荐，详细点击http://www.cnblogs.com/ye-hcj/p/7723104.html
   demo如下
       import React from 'react'
       import ReactDOM from 'react-dom'
       import {TransitionGroup,CSSTransition } from 'react-transition-group'
       import { withRouter } from 'react-router'
       import './index.css'
       import {
           BrowserRouter as Router,
           Route,
           Link,
           Switch
       } from 'react-router-dom'
       const MyComponent1 = () => (
           
   我是组件一
       )
       const MyComponent2 = () => (
           
   我是组件二
       )
       const MyComponent3 = () => (
           
   我是组件三
       )
       const AnimateComponent = withRouter(( {location} ) => (
           
   
               
   组件一
               
   组件二
               
   组件三
               
   
               
                   {/*这里使用location.key会在所有的路由之间使用相同的动画效果，如果你不想子路由也应用动画效果请使用location.pathname.split('/')[1]*/}
                   
                       
   
                           
                               
                               
                               
                           
                       
                   
               
           
       ))
       class MyComponent extends React.Component {
           render () {
               return (
                   
                       
                   
               )
           }
       }
       ReactDOM.render(
           ,
           document.getElementById('root')
       ) 
   注：
       你可能使用的动画
       .fade-enter {
           opacity: 0;
           z-index: 1;
       }
       .fade-enter.fade-enter-active {
           opacity: 1;
           transition: opacity 250ms ease-in;
       }

posted @ 2017-10-28 18:49 qz奔跑的马 阅读( ...) 评论( ...) 编辑 收藏