react-router4.2.0实用例子
-
代码分割
官网上面写的代码分割是不支持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 = () => ( <div>我是子组件</div> ) export default MyComponent; 在需要代码分割的文件中导入这个Bundle import Bundle from './test.js' const MyComponent = (props) => ( <Bundle load={() => import('./demo.js')}> {(MyComponent) => <MyComponent {...props} />} </Bundle> ) 只有当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
-
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包裹即可 <Router> <ScrollTop> <div> <div style={{"position":"fixed","top": 0,"left": 0}}> <Link to="/a">组件一</Link> <Link to="/b">组件二</Link> </div> <Route path="/a" component={Demo} /> <Route path="/b" component={Demo1} /> </div> </ScrollTop> </Router>
-
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 ( <div> <ScrollToTopOnMount/> <Demo /> </div> ) } }
-
路由之间的动画切换
结合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 = () => ( <div style={{"height": "200px","width": "200px","background": "red","position": "absolute","top": 0, "left": 0}}>我是组件一</div> ) const MyComponent2 = () => ( <div style={{"height": "200px","width": "200px","background": "yellow","position": "absolute","top": 0, "left": 0}}>我是组件二</div> ) const MyComponent3 = () => ( <div style={{"height": "200px","width": "200px","background": "green","position": "absolute","top": 0, "left": 0}}>我是组件三</div> ) const AnimateComponent = withRouter(( {location} ) => ( <div> <p><Link to="/a">组件一</Link></p> <p><Link to="/b">组件二</Link></p> <p><Link to="/c">组件三</Link></p> <hr /> <TransitionGroup> {/*这里使用location.key会在所有的路由之间使用相同的动画效果,如果你不想子路由也应用动画效果请使用location.pathname.split('/')[1]*/} <CSSTransition key={location.key} timeout={500} classNames="fade" mountOnEnter={true} unmountOnExit={true}> <div style={{"position": "relative","top": 0,"left": 0}}> <Switch location={location}> <Route path="/a" exact component={MyComponent1}/> <Route path="/b" component={MyComponent2}/> <Route path="/c" component={MyComponent3}/> </Switch> </div> </CSSTransition> </TransitionGroup> </div> )) class MyComponent extends React.Component { render () { return ( <Router> <AnimateComponent></AnimateComponent> </Router> ) } } ReactDOM.render( <MyComponent/>, document.getElementById('root') ) 注: 你可能使用的动画 .fade-enter { opacity: 0; z-index: 1; } .fade-enter.fade-enter-active { opacity: 1; transition: opacity 250ms ease-in; }