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 相关文章推荐
JavaScript 对象、函数和继承
Jul 07 Javascript
JavaScript继承基础讲解(原型链、借用构造函数、混合模式、原型式继承、寄生式继承、寄生组合式继承)
Aug 16 Javascript
jquery简单实现幻灯片的方法
Aug 03 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
JS+CSS实现简易实用的滑动门菜单效果
Sep 18 Javascript
JS截取与分割字符串常用技巧总结
Nov 10 Javascript
jQuery配合coin-slider插件制作幻灯片效果的流程解析
May 13 Javascript
javascript-解决mongoose数据查询的异步操作
Dec 22 Javascript
Bootstrap表单简单实现代码
Mar 06 Javascript
Vue文件配置全局变量的实例
Sep 06 Javascript
基于JavaScript实现一个简单的Vue
Sep 26 Javascript
Vue3.0 手写放大镜效果
Jul 25 Vue.js
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
syphon 虹吸式咖啡冲泡冲煮倒水的得与失
2021/03/03 冲泡冲煮
深入php之规范编程命名小结
2013/05/15 PHP
php中0,null,empty,空,false,字符串关系的详细介绍
2013/06/20 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php实现上传图片文件代码
2015/07/19 PHP
php连接oracle数据库的方法(测试成功)
2016/05/26 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
php 中的信号处理操作实例详解
2020/03/04 PHP
小议Function.apply() 之一------(函数的劫持与对象的复制)
2006/11/30 Javascript
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
往光标所在位置插入值的js代码
2013/09/22 Javascript
简单的JavaScript互斥锁分享
2014/02/02 Javascript
jQuery内置的AJAX功能和JSON的使用实例
2014/07/27 Javascript
JavaScript中消除闭包的一般方法介绍
2015/03/16 Javascript
AngularJS实现textarea记录只能输入规定数量的字符并显示
2016/04/26 Javascript
jQuery添加和删除输入文本框标签代码
2016/05/20 Javascript
JS验证 只能输入小数点,数字,负数的实现方法
2016/10/07 Javascript
Vue 实时监听窗口变化 windowresize的两种方法
2018/11/06 Javascript
用 js 写一个 js 解释器过程详解
2019/08/02 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
jQuery 移除事件的方法
2020/06/20 jQuery
javascript canvas时钟模拟器
2020/07/13 Javascript
JS图片懒加载技术实现过程解析
2020/07/27 Javascript
vue 如何使用递归组件
2020/10/23 Javascript
详细解析Python当中的数据类型和变量
2015/04/25 Python
python通过配置文件共享全局变量的实例
2019/01/11 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
VSCode中自动为Python文件添加头部注释
2019/11/14 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
python中time tzset()函数实例用法
2021/02/18 Python
Raffaello Network德国:意大利拉斐尔时尚购物网
2019/05/01 全球购物
英语专业毕业生自我鉴定
2013/11/09 职场文书
matplotlib画混淆矩阵与正确率曲线的实例代码
2021/06/01 Python
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB