react 路由Link配置详解


Posted in Javascript onNovember 11, 2021

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>
        
      )
    }
}

 到此这篇关于react 路由Link配置详解的文章就介绍到这了,更多相关react 路由Link内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery 开发者应该注意的9个错误
May 03 Javascript
用js提交表单解决一个页面有多个提交按钮的问题
Sep 01 Javascript
基于Css3和JQuery实现打字机效果
Aug 11 Javascript
JS、jQuery中select的用法详解
Apr 21 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
JS闭包可被利用的常见场景小结
Apr 09 Javascript
原生js实现拖拽功能基本思路详解
Apr 18 Javascript
关于HTML5的data-*自定义属性的总结
May 05 Javascript
在vue中v-bind使用三目运算符绑定class的实例
Sep 29 Javascript
微信小程序用户授权弹窗 拒绝时引导用户重新授权实现
Jul 29 Javascript
element-ui table组件如何使用render属性的实现
Nov 04 Javascript
vue界面发送表情的实现代码
Sep 11 Javascript
React Fragment介绍与使用详解
Nov 11 #Javascript
在js中修改html body的样式
Nov 11 #Javascript
用JS创建一个录屏功能
JavaScript数组 几个常用方法总结
Nov 11 #Javascript
JavaScript 事件捕获冒泡与捕获详情
JavaScript 定时器详情
Nov 11 #Javascript
使用javascript解析二维码的三种方式
Nov 11 #Javascript
You might like
三种php连接access数据库方法
2013/11/11 PHP
PHP7 新特性详细介绍
2016/09/06 PHP
PHP简单装饰器模式实现与用法示例
2017/06/22 PHP
php中请求url的五种方法总结
2017/07/13 PHP
PHP获取链表中倒数第K个节点的方法
2018/01/18 PHP
超越Jquery_01_isPlainObject分析与重构
2010/10/20 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
2011/03/28 Javascript
如何使用json在前后台进行数据传输实例介绍
2013/04/11 Javascript
不到30行JS代码实现Excel表格的方法
2014/11/15 Javascript
jQuery模拟黑客帝国矩阵效果实例
2015/06/28 Javascript
jquery实现的蓝色二级导航条效果代码
2015/08/24 Javascript
BootStrap Progressbar 实现大文件上传的进度条的实例代码
2016/06/27 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
通俗易懂地解释JS中的闭包
2017/10/23 Javascript
Element MessageBox弹框的具体使用
2020/07/27 Javascript
[43:47]DOTA2上海特级锦标赛主赛事日 - 4 败者组第四轮#2 MVP.Phx VS Fnatic第一局
2016/03/05 DOTA
收藏整理的一些Python常用方法和技巧
2015/05/18 Python
Python连接PostgreSQL数据库的方法
2016/11/28 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
python输入整条数据分割存入数组的方法
2018/11/13 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Python 50行爬虫抓取并处理图灵书目过程详解
2019/09/20 Python
python使用rsa非对称加密过程解析
2019/12/28 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
python实现QQ邮箱发送邮件
2020/03/06 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
巴西最大的巴士票务门户:Quero Passagem
2020/11/21 全球购物
酷瑞网络科技面试题
2012/03/30 面试题
教师自荐信
2013/12/10 职场文书
电子信息专业自荐书
2014/02/04 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
2014年五四青年节演讲稿范文
2014/04/22 职场文书
办公室文员岗位职责范本
2014/06/12 职场文书
纯html+css实现奥运五环的示例代码
2021/08/02 HTML / CSS
分享几种python 变量合并方法
2022/03/20 Python
Dubbo+zookeeper搭配分布式服务的过程详解
2022/04/03 Java/Android