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 网页跳转的方法
Dec 24 Javascript
非html5实现js版弹球游戏示例代码
Sep 22 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
js闭包实例汇总
Nov 09 Javascript
Node.js抓取中文网页乱码问题和解决方法
Feb 10 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
js变量提升深入理解
Sep 16 Javascript
jQuery实现弹窗居中效果类似alert()
Feb 27 Javascript
ES6正则表达式扩展笔记
Jul 25 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 Javascript
js实现星星打分效果
Jul 05 Javascript
vue+elementUI动态增加表单项并添加验证的代码详解
Dec 17 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
PHP4实际应用经验篇(5)
2006/10/09 PHP
PHP使用pear自带的mail类库发邮件的方法
2015/07/08 PHP
Session 失效的原因汇总及解决丢失办法
2015/09/30 PHP
jQuery判断checkbox是否选中的小例子
2013/12/02 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
javascript动态添加checkbox复选框的方法
2015/12/23 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
jquery 判断selection range 是否在容器中的简单实例
2016/08/02 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
JS实现弹出下载对话框及常见文件类型的下载
2017/07/13 Javascript
JQuery EasyUI 结合ztrIee的后台页面开发实例
2017/09/01 jQuery
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
Vue2 模板template的四种写法总结
2018/02/23 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
小程序实现选择题选择效果
2018/11/04 Javascript
详解微信小程序用定时器实现倒计时效果
2019/04/30 Javascript
解决vue组件中click事件失效的问题
2019/11/09 Javascript
[47:38]Optic vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
[原创]windows下Anaconda的安装与配置正解(Anaconda入门教程)
2018/04/05 Python
python3.6数独问题的解决
2019/01/21 Python
Python线程之定位与销毁的实现
2019/02/17 Python
python实现抠图给证件照换背景源码
2019/08/20 Python
python之openpyxl模块的安装和基本用法(excel管理)
2021/02/03 Python
CSS3实现粒子旋转伸缩加载动画
2016/04/22 HTML / CSS
HTML5: Web 标准最巨大的飞跃
2008/10/17 HTML / CSS
荷兰优雅女装网上商店:Heine
2016/11/14 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
如何将字串String转换成整数int
2015/02/21 面试题
结构工程个人自荐信范文
2013/11/30 职场文书
幼儿园大班开学教师寄语
2014/04/03 职场文书
学习考察心得体会
2014/09/04 职场文书
党小组鉴定意见
2015/06/02 职场文书
小学开学典礼新闻稿
2015/07/17 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书
话题作文之自信作文
2019/11/15 职场文书
详解TS数字分隔符和更严格的类属性检查
2021/05/06 Javascript