美文网首页
react-router基本使用

react-router基本使用

作者: 宝爷_174c | 来源:发表于2018-12-29 15:30 被阅读0次

    编程式导航(withRouter用法)

    import {withRouter} from 'react-router-dom';
    
    goBack(){
        this.props.history.goBack();
    }  
    goDetail(){
        this.props.history.push('/detail');
    }  
    goDetailWithParam(item){
        this.props.history.push({pathname : '/cart',state:{item}});
    }
        
    <span className="ico" onClick={this.goBack.bind(this)}>
        <i className="iconfont">&#xe501;</i>
    </span>
    //这里的item来自for循环的每一项
    <li onClick={this.goDetailWithParam.bind(this,item)} key={encodeURI(item.imgUrl)}>
    
    export default withRouter(Header);
    

    引入withRouter之后,就可以使用编程式导航进行点击跳转, 需要注意的是export default的暴露如上面所写,如果结合redux使用,则暴露方式为: withRouter(connect(...)(MyComponent))

    调用history的goBack方法会返回上一历史记录

    调用history的push方法会跳转到目标页,如上面goDetail方法

    跳转传参: push()可以接收一个对象参数,跳转之后,通过this.props.location.state接收

    <BrowserRouter>
        <div className="App">
            <Switch>
                <Route exact path="/" component={Home}/>
                <Route exact path="/home" component={Home}/>
                <Route exact path="/playDeteil" component={PlayDetail}/>
                <Redirect to='/home'></Redirect>
            </Switch>
        </div>
    </BrowserRouter>
    

    按需加载

    $ npm i -S react-loadable
    

    1.在页面组件文件夹中新建loadable.js

    import React from 'react';
    import Loadable from 'react-loadable';
    import Loading from './../../components/PageLoad';     // 过场组件
     
    const LoadableComponent = Loadable({
      loader: () => import('./'),       // 当前文件下的组件(index.js)
      loading: Loading,
    });
     
    export default () => <LoadableComponent/>;
    

    2.在路由js中引入component时,引入loadable.js

    // 原始用法
    import Home from './../views/home';
    // loadable时引入方式
    import Home from './../views/home/loadable';
    

    3.如果跳转路由需要传参时,因为使用loadable组件包裹,所以需要使用withRouter让包裹的组件也能获取props。

    import { withRouter } from 'react-router-dom';
    ...
    export default withRouter(Component);
    

    重要API一览

    路由容器组件

    • BrowserRouter : 包裹整个应用

    • Router : 路由对应渲染组件,可嵌套

    • Link : 跳转专用

    • BrowserRouter:

    浏览器自带的API,restful风格(需要后台做相应的调整);
    
    • HashRouter:
    使用hash方式进行路由;
    
    • MemoryRouter:
    在内存中管理history,地址栏不会变化。在reactNative中使用。
    
    • Route标签
    - 该标签有三种渲染方式component、render、children(绝大多数情况使用component组件就好了);
    - 三种渲染方式都会得到三个属性match、history、location;
    - 渲染组件时,route props跟着一起渲染;
    - children方式渲染会不管地址栏是否匹配都渲染一些内容,在这里加动画一时很常见的做法。
    
    • Link标签
    - to: 后面可以接字符串,也可以跟对象(对象可以是动态地添加搜索的信息);
    - replace: 当设置为true时,点击链接后将使用新地址替换掉访问历史记录里面的原地址。
    
    • NavLink标签
    - 是的一个特定版本, 会在匹配上当前URL的时候会给已经渲染的元素添加样式参数;
    - activeClassName: 当地址匹配时添加相应class;
    - activeStyle: 当地址匹配时添加相应style;
    - exact: 当地址完全匹配时,才生效;
    - isActive: 添加额外逻辑判断是否生效。
    
    • Prompt标签
    - when: when的属性值为true时启用防止转换;
    - message: 后面可以跟简单的提示语,也可以跟函数,函数是有默认参数的。
    
    • Redirect标签
    - 可以写在的render属性里面,也可以跟平级;
    - to: 依旧是可以跟字符串或对象;
    - push: 添加该属性时,地址不会被覆盖,而是添加一条新纪录;
    - from: 重定向,与平级时。
    
    • match
    - params: 通过解析URL中动态的部分获得的键值对;
    - isExact: 当为true时,整个URL都需要匹配;
    - path: 在需要嵌套的时候用到;
    - url: 在需要嵌套的时候会用到;
    - 获取方式: 以this.props.match方式。
    
    import {
      BrowserRouter as Router, // 或者是HashRouter、MemoryRouter
      Route,   // 这是基本的路由块
      Link,    // 这是a标签
      Switch   // 这是监听空路由的,(/a, /b不使用时会先匹配'/')
      Redirect // 这是重定向
      Prompt   // 防止转换  
    } from 'react-router-dom'
    

    权限控制

    • 利用组件内的Redirect标签
    const PrivateRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={props => (
        fakeAuth.isAuthenticated ? (
          <Component {...props}/>
        ) : (
          <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
          }}/>
        )
      )}/>
    )
    

    阻止离开当前路由

    • 在组件内部添加Prompt标签来进行权限控制
    <Prompt
      when={isBlocking}
      message={location => (
        `你真的要跳转到 ${location.pathname}么?`
      )}
    />
    

    过渡动画

    • 样式分别定义:.example-enter、.example-enter.example-enter-active、.example-leave、.example-leave.example-leave-active。

    实例

    <ReactCSSTransitionGroup
      transitionName="fade"
      transitionEnterTimeout={300}
      transitionLeaveTimeout={300}
    >
      <!-- 这里和使用 ReactCSSTransitionGroup 没有区别,唯一需要注意的是要把你的地址(location)传入「Route」里使它可以在动画切换的时候匹配之前的地址。 -->
      <Route
        location={location}
        key={location.key}
        path="/:h/:s/:l"
        component={HSL}
      />
    </ReactCSSTransitionGroup>
    

    相关文章

      网友评论

          本文标题:react-router基本使用

          本文链接:https://www.haomeiwen.com/subject/ilfplqtx.html