酷站(www.ku0.com)-致力于为互联网从业者提供专业的网络资源资讯

热门关键词:  企业  as  baidu  c4rp3nt3r  美女

react路由Link配置的介绍

来源:互联网 作者:秩名 人气: 发布时间:2021-11-10
本篇文章主要介绍了react路由Link配置的介绍,对大家的学习或者工作具有一定的参考学习价值,感兴趣的小伙伴们可以参考一下,也感谢大家对酷站(ku0.com)的支持。

1、Link的to属性

(1)放置路由路径

(2)放置对象,且为规定格式

{pathname:"/xx",search:'?键值对',hash:"#xxx",state:{键值对}}会自动将pathname、search、hash拼接在url路径上,state为传入的参数

可通过输出props查看对象内的信息this.props.location.state.键名获取state内的数据

2、Link的replace属性

添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈

3、Link传参

在to路径后添加"/键值"

在路由route,path路径后添加"/:键名"

在组件中,函数式组件:先传入props形参,然后props.match.params.键名

类组件:this.props.match.params.键名

代码示例:

import React,{Component} from 'react'
//import {Route,BrowserRouter,Link} from 'react-router-dom'
//将BrowserRouter重命名为Router
import {BrowserRouter as Router,Link,Route} from 'react-router-dom'
import { Button } from 'antd';
import './App.css';

function Home()
{
  return(
      <div>admin首页</div>
    )
}

function Me(props)
{
  console.log(props)
  return(
      <div>admin我的</div>
    )
}

function Product(props)
{
  return(
      <div>admin产品页面:{props.match.params.id}</div>
    )
}

export default class App extends Component{
   constructor()
    {
      super();
    }
    render()
    {
    {/*若将路径写成对象形式,且和下面相同,会自动将pathname、search、hash自动拼接在url路径上,state为传入组件的数据*/}
      let obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}
      return(
        <div id='app'>
      {/*BrowserRouter可以放多个*/}
          <Router>
        
        {/*因为组件也是返回html内容,故可以直接通过函数返回html内容充当组件,但不能直接写html内容*/}
          <div>  
            <Route path="/"  exact component={()=><div>首页</div>}></Route>
            <Route path="/product"  component={()=><div>product</div>}></Route>
            <Route path="/me"  component={()=><div>me</div>}></Route>
          </div>
          {/*<Route path="/" component={function(){return <div>首页2</div>}}></Route>*/}

          </Router>
        

          
          {/*BrowserRouter内部只能有一个根容器,包裹其他内容*/}
        {/*添加basename='/xx'后,点击Link跳转其他路由时,url会将/xx添加到路由名前,所以使用路由路径和加了admin的路由路径都能匹配该路由*/}
          <Router basename='/admin'>
            <div>
                <div className='nav'>
                    <Link to='/'>Home</Link>
                    <Link to='/product/123'>Product</Link>
                  {/*可在对应的组件中输出props查看传入的对象的信息,添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈*/}
                    <Link to={obj} replace>个人中心</Link>
                </div>

                <Route path="/" exact component={Home}></Route>
                <Route path="/product/:id"  component={Product}></Route>
                <Route path="/me" exact component={Me}></Route>
            </div>
          </Router>

        </div>
        
      )
    }
}

版权声明:本文内容来源于互联网或用户自行发布贡献,该文观点仅代表原作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 959677720#qq.cn(#换@) 举报,一经查实,本站将立刻删除。
原文链接:https://blog.csdn.net/weixin_43294560/article/details/104490844

相关文章

  • 使用react-color实现前端取色器的教程

    使用react-color实现前端取色器的教程

    我们可以通过react-color实现前端界面的取色器,效果如下图所示: 安装 npm i react-color -S 使用 import React, { Component, Fragment, createRef } from react; import { Popover } from antd; import {......
    11-12
  • React手写tab切换的介绍

    React手写tab切换的介绍

    父文件 import React, { useState } from react; // import Module1 from ./Module1; // import Module2 from ./Module2; // import Module3 from ./Module3; // import Module4 from ./Module4; import HeaderTtabs, { tagType } from......
    11-12
  • react路由Link配置的介绍

    react路由Link配置的介绍

    1、Link的to属性 (1)放置路由路径 (2)放置对象,且为规定格式 {pathname:/xx,search:?键值对,hash:#xxx,state:{键值对}}会自动将pathname、search、hash拼接在url路径上,state为传入的参数 可通......
    11-10
  • JavaScript实现橱窗展示的介绍

    JavaScript实现橱窗展示的介绍

    先搭架子: * { margin: 0; padding: 0; } .box { width: 800px; height: 190px; border: 1px solid #000; margin: 100px auto; } ul { list-style: none; display: flex; } ul img { vertical-align: top; } .progress { width: 100......
    11-08
  • 原型和原型链prototype和proto的区别介绍

    原型和原型链prototype和proto的区别介绍

    1、原型 原型是function对象下的属性,它定义了构造函数的共同祖先,也就是一个父子级的关系,子对象会继承父对象的方法和属性 prototype是函数下的属性,对象想要查看......
    10-31
  • Echats图表大屏自适应的实现方法介绍

    Echats图表大屏自适应的实现方法介绍

    使用图表结合数据可以很直观的视觉效应,大屏展示已经成为企业数据展示的常见场景,如何做到大屏自适应是我们需要解决的一个问题,下面是其中一种解决方案,利用......
    10-25
  • Vue生命周期介绍和钩子函数介绍

    Vue生命周期介绍和钩子函数介绍

    Vue生命周期介绍和钩子函数 组件每个阶段它的内部构造是不一样的,所以一般特定的钩子做特定的事,比如Ajax获取数据就可以在mounted阶段。从Vue实例被创建开始到该实例......
    10-25
  • 基于angular实现树形二级表格

    基于angular实现树形二级表格

    先看效果: 代码: 1、html div class=userContent_content div table tr td节点名称/td td节点管理IP/td td节点登录名/td td节点登录密码/td /tr //使用ng-container作为空标签用于辅助放置for或......
    10-16
  • react之组件通信介绍

    react之组件通信介绍

    父组件与子组件通信 父组件将自己的状态传递给子组件,子组件当做属性来接收,当父组件更改自己状态的时候,子组件接收到的属性就会发生改变 父组件利用ref对子组......
    10-15
  • JavaScript中5个常用的对象的介绍

    JavaScript中5个常用的对象的介绍

    前言: 相信做网站对JavaScript再熟悉不过了,它是一门脚本语言,不同于Python的是,它是一门浏览器脚本语言,而Python则是服务器脚本语言,我们不光要会Python,还要会......
    10-11