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 相关文章推荐
Locate a File Using a File Open Dialog Box
Jun 18 Javascript
基于jQuery的表格操作插件
Apr 22 Javascript
jquery 使用点滴函数代码
May 20 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
使用js Math.random()函数生成n到m间的随机数字
Oct 09 Javascript
AngularJS语法详解(续)
Jan 23 Javascript
jquery Validation表单验证使用详解
Sep 12 Javascript
JavaScript必知必会(五) eval 的使用
Jun 08 Javascript
ionic由于使用了header和subheader导致被遮挡的问题的两种解决方法
Sep 22 Javascript
微信小程序开发之大转盘 仿天猫超市抽奖实例
Dec 08 Javascript
vue2.0+ 从插件开发到npm发布的示例代码
Apr 28 Javascript
vue.js 2.*项目环境搭建、运行、打包发布的详细步骤
May 01 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
PHP6 中可能会出现的新特性预览
2014/04/04 PHP
php检测url是否存在的方法
2015/04/14 PHP
var与Javascript变量隐式声明
2009/09/17 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
javascript操作excel生成报表示例
2014/05/08 Javascript
select多选 multiple的使用示例
2014/06/16 Javascript
Javascript中String的常用方法实例分析
2015/06/13 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
Bootstrap中data-target 到底是什么
2017/02/14 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
angular中的cookie读写方法
2017/08/02 Javascript
在 React、Vue项目中使用SVG的方法
2018/02/09 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
Vue实现一个无限加载列表功能
2018/11/13 Javascript
vue离开当前页面触发的函数代码
2020/09/01 Javascript
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
一个基于flask的web应用诞生 flask和mysql相连(4)
2017/04/11 Python
python算法表示概念扫盲教程
2017/04/13 Python
Python下载网络文本数据到本地内存的四种实现方法示例
2018/02/05 Python
python 检查是否为中文字符串的方法
2018/12/28 Python
Python XML转Json之XML2Dict的使用方法
2019/01/15 Python
matplotlib grid()设置网格线外观的实现
2021/02/22 Python
英国女装网上商店:I Saw It First
2018/10/18 全球购物
C/C++有关内存的思考题
2015/12/04 面试题
linux比较文件内容的命令是什么
2015/09/23 面试题
精彩的大学生自我评价
2013/11/17 职场文书
运动会广播稿100字
2014/01/11 职场文书
法制宣传实施方案
2014/03/13 职场文书
战略合作意向书范本
2014/04/01 职场文书
员工安全生产承诺书
2014/05/22 职场文书
2019已经过半,你知道年中工作总结该怎么写吗?
2019/07/03 职场文书
Spring Boot优化后启动速度快到飞起技巧示例
2022/07/23 Java/Android
python绘制云雨图raincloud plot
2022/08/05 Python