react 在非路由组件中使用路由组件的api

曾经终败给现在 2021-07-24 17:26 361阅读 0赞

如使用:this.props.history、this.props.location、this.props.match等
    
    1、引入
    	import {withRouter} from 'react-router-dom'
    	
    2、将export default类取消,改写成在最后
    
    	export default withRouter(类名);

代码示例:

import React,{ Component} from 'react'
    import { TabBar} from 'antd-mobile'
    import PropTypes from 'prop-types'
    import { withRouter} from 'react-router-dom'
    
    const Item=TabBar.Item
    
    class App extends Component{ 
        static propTypes={ 
            navList:PropTypes.array.isRequired
        }
       render()
       { 
           const { navList}=this.props
           const { pathname} = this.props.location
    
           return(
            <TabBar>
                { 
                    navList.map((nav, index) => (
                        <Item key={ nav.path}
                            title={ nav.text}
                            icon={ { uri: require(`./imgs/${ nav.icon}.png`)}}
                            selectedIcon={ { uri: require(`./imgs/${ nav.icon}-selected.png`)}}
                            selected={ pathname===nav.path}
                            onPress={ () => { 
                            this.props.history.replace(nav.path)
                            }}
                        />
                    ))
                }
            </TabBar>
           )
       }
    }
    
    export default withRouter(App);

发表评论取消回复

表情：

评论列表（有 0 条评论，361人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue 多组件路由

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

约定不等于承诺〃/ 2022年12月21日 04:54/ 0 赞/ 217 阅读

相关 React路由

React路由安装 react-router相关标签简单路由跳转嵌套路由跳转动态链接路由匹配优化重定向路由传

梦里梦外;/ 2022年10月22日 07:33/ 0 赞/ 221 阅读

相关 React 路由

React 路由 [尚硅谷 2021 版 React 技术全家桶全套完整版（零基础入门到精通/男神天禹老师亲授）][2021 _ React] 路由 SPA 1.

系统管理员/ 2022年10月07日 08:51/ 0 赞/ 194 阅读

相关 RouteComponent 路由组件

route component（路由组件）指的是一个直接被 [route（路由）][route]（例如 `<Route component>`）渲染出的 [co

水深无声/ 2022年04月01日 04:57/ 0 赞/ 830 阅读

相关嵌套组件与嵌套路由的使用

基于多级菜单栏的嵌套组件的使用涉及文件:入口文件main.js,主组件App.vue,layouts目录下的index.js,组件layouts.vue,组件appCo

布满荆棘的人生/ 2022年02月03日 18:27/ 0 赞/ 254 阅读

相关 vue-router路由内组件实例和路由外组件实例互相访问

各种层级路由之间的通信，首先想到的可能是Vuex，但在某些情况下，我并不想用Vuex，想通过获取组件实例，直接进行交互。 <template> <di

港控/mmm°/ 2021年12月15日 21:03/ 0 赞/ 421 阅读

相关 withRouter() 在非路由组件中使用路由库的api

我们知道，在非路由组件中，是拿不到例如像 this.props.location.pathname 数据。倘若我们想拿到类似这种路由数据，可以使用withRouter()

绝地灬酷狼/ 2021年09月19日 07:24/ 0 赞/ 333 阅读

相关 React如何在组件中获取路由参数？

路由参数假如我们有很多 list 页面，这些页面除了动态内容不同，其他的页面部分都相同，这个时候需要怎么配置路由和组件呢？这种场景就需要用到路由的参数功能，增加一条包

比眉伴天荒/ 2021年09月17日 20:34/ 0 赞/ 512 阅读

相关 React路由

路由路由最基本的职责就是当页面的访问地址与 Route 上的 path 匹配时，就渲染出对应的 UI 界面。实现spa应用： 1. 整个项目只有一个完整页面

末蓝、/ 2021年07月25日 01:40/ 0 赞/ 542 阅读

相关 react 在非路由组件中使用路由组件的api

如使用:this.props.history、this.props.location、this.props.match等 1、引入 impo

曾经终败给现在/ 2021年07月24日 17:26/ 0 赞/ 362 阅读