react 路由Link配置详解

2024-11-27 10:54:37

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内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

详解各版本React路由的跳转的方法

前言 React-Router已经发布了多个版本,利用路由导航的使用方法都不大一样,在这里总结一下. React-Router 2.0.0 版本 2.0.0版本需要使用browserHistory进行跳转,具体参考一下代码: import { browserHistory } from 'react-router' browserHistory.push('/path') React-Router 2.4.0版本以上 React-Router 2.4.0版本以上,可以通过mixin的方法,使组件
React-router4路由监听的实现

React-router 4 React Router4是一个纯React重写的包,现在的版本中已不需要路由配置,一切皆组件. 问题出发点最近在一个新的H5项目中使用了react router 4 ("react-router-dom": "^4.2.2"),项目中的一部分页面是需要给app客户端的同学使用,这样H5项目中的title就不能一成不变,需要显示对应页面的title,所以,我们就需要去监听路由变动来更改title. 思路在react中,例如:在父路由
react router4+redux实现路由权限控制的方法

总体概述一个完善的路由系统应该是这样子的,当链接到的组件是需要登录后才能查看,要能够跳转到登录页,然后登录成功后又跳回来之前想访问的页面.这里主要是用一个权限控制类来定义路由路由信息,同时用redux把登录成功后要访问的路由地址给保存起来,登录成功时看redux里面有没有存地址,如果没有存地址就跳转到默认路由地址. 路由权限控制类在这个方法里面,通过sessionStorage判断是否登录了,如果没有登录,就保存一下当前想要跳转的路由到redux里面.然后跳转到我们登录页. import R
react-router JS 控制路由跳转实例

Link组件用于正常的用户点击跳转,但是有时还需要表单跳转.点击按钮跳转等操作.这些情况怎么跟React Router对接呢? 下面是一个表单. <form onSubmit={this.handleSubmit}> <input type="text" placeholder="userName"/> <input type="text" placeholder="repo"/> <
React-router v4 路由配置方法小结

本文主要介绍了React-router v4 路由配置方法小结,分享给大家,也给自己留个笔记一. Switch .Router .Route三者的区别 1.Route Route 是建立location 和 ui的最直接联系 2.Router react-router v4 中,Router被拆分成了StaticRouter.MemoryRouter.BrowserRouter.HashRouter.NativeRouter. MemoryRouter.BrowserRouter.HashRo
详解react如何在组件中获取路由参数

路由参数假如我们有很多 list 页面,这些页面除了动态内容不同,其他的页面部分都相同,这个时候需要怎么配置路由和组件呢? 这种场景就需要用到路由的参数功能,增加一条包含参数的路由配置. import List from './component/list'; <Route path="list/:id" component={List} /> 注意 path 属性中的 :id 就是该路由的参数( param ).再来看看 List 页面的组件. /list 对应了 li
react-router4 嵌套路由的使用方法

react我自己还在摸索学习中,今天正好学习一下react-router4 嵌套路由的使用方法,顺便留着笔记先直接贴代码 import React from 'react'; import ReactDOM from 'react-dom'; import { HashRouter as Router, Route, Switch} from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserH
react router 4.0以上的路由应用详解

本文介绍了react router 4.0以上的路由应用,分享给大家,具体如下: 在4.0以下的react router中,嵌套的路由可以放在一个router标签中,形式如下,嵌套的路由也直接放在一起. <Route component={App}> <Route path="groups" components={Groups} /> <Route path="users" components={Users}> <Rou
react 路由Link配置详解

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将跳转前的上一个页面替换
React 路由使用示例详解

目录 Router 简单路由嵌套路由未匹配路由路由传参数索引路由活动链接搜索参数自定义行为 useNavigate 参考资料 Router react-router-dom是一个处理页面跳转的三方库,在使用之前需要先安装到我们的项目中: # npm npm install react-router-dom@6 #yarn yarn add react-router-dom@6 简单路由使用路由时需要为组件指定一个路由的path,最终会以path为基础,进行页面的跳转.具体使用先看
Angular路由ui-router配置详解

简介 angularJs自身提供路由ng-router,但是ng-router不是很好用,配置项零散,好比Vue提供的组件传值一样,虽然提供给你了用法,但是开发过程中逻辑一多用着萌萌的,所以我们抛开ng-router来看ui-router. 引入ui-router 我们可以去bootCDN搜索ui-router,本地创建js文件,将代码copy进去使用,这样就可以打入本地使用了,但是要注意的是,Angular的main.js一定要在ui-router之前引用,注意一下先后顺序问题. 例如: <s
React Redux使用配置详解

目录前言 redux三大原则 redux执行流程 redux具体使用执行流程 redux使用流程前言在使用redux之前,首先了解一下redux到底是什么? 用过vue的肯定知道vuex,vuex是vue中全局状态管理工具,主要是用于解决各个组件和页面之间数据共享问题,对数据采用集中式管理,而且可以通过插件实现数据持久化 redux跟vuex类似,最主要的就是用作状态的管理,redux用一个单独的常量状态state来保存整个应用的状态,可以把它想象成数据库,用来保存项目应用中的公共数据
vuejs路由的传参及路由props配置详解

目录前言方式1-使用query方式命名路由方式2-路由的params参数 query与params的区别路由的props配置路由配置的布尔模式路由配置的对象模式路由配置函数模式总结前言在Vue项目里,去实现左侧菜单边栏多级内容的展示,导航的切换,以及内容链接的跳转等,用的都是前端路由vue-router,它的重要性,不可言喻下面介绍一下Vue中的路由传参以及路由的prps配置方式1-使用query方式这里循环遍历一个列表为例,query的方式,跳转的url后面携带的一
SmoothWall 防火墙软路由安装+配置详解

一.前言:本来搜索DRL但是看到没有什么关于SW更好的教程,为了方便大家所以作了这个教程. 1.感谢ahui兄的软件简介:SmoothWall是欧洲成功的Open Source项目之一,它可以帮助你把一台已经淘汰的386,486机器变成一台功能强大,稳定的防火抢路由器!它已经被超过300,000个用户,21 个国家使用!SmoothWall同时支持ISDN,ASDL/Cable和多网卡等网络设备,最令人不可思议的是所有这些都可以在5分钟之内配置完成! 基于Web的管理和支持SSH,DHCP,完整
laravel 配置路由 api和web定义的路由的区别详解

1.路由经过中间件方面不同打开kerenl.php就可以看到区别 protected $middlewareGroups = [ 'web' => [ \App\Http\Middleware\EncryptCookies::class, \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class, \Illuminate\Session\Middleware\StartSession::class, // \Illumina
SpringCloud Gateway动态路由配置详解

目录路由动态路由模型实体类动态路径配置路由模型JSON数据路由 gateway最主要的作用是,提供统一的入口,路由,鉴权,限流,熔断:这里的路由就是请求的转发,根据设定好的某些条件,比如断言,进行转发. 动态动态的目的是让程序更加可以在运行的过程中兼容更多的业务场景. 涉及到两个服务,一个是门户服务(作用是提供给运营人员管理入口--包括:管理路由.绑定路由),一个是网关服务(gateway组件,为门户服务提供:查询路由信息.添加路由.删除路由.编辑路由接口). 路由模型实体类 /*
Vue-cli3多页面配置详解

Vue-cli3发布已经好长时间了,笔者也在一直使用,由于公司业务需要要使用多页面配置,于是花时间研究了一下Vue-cli3如何配置多页面.由于Vue-cli3相比之前的版本做了很大的改动,在研究过程中也遇到一些问题. 对于Vue-cli3创建项目这里就不做太多的赘述了,毕竟不属于本文内容,有关相关博客也有很多,大家可以自行Google一下就好了. 多页面应用(mpa)与单页面应用(spa)优缺点在项目中我们用到的大多数都是单页面应用(spa),对于多页面可能用到的比较少一些,具体还是要根据具
React Redux应用示例详解

目录一 React-Redux的应用 1.学习文档 2.Redux的需求 3.什么是Redux 4.什么情况下需要使用redux 二.最新React-Redux 的流程安装Redux Toolkit 创建一个 React Redux 应用基础示例 Redux Toolkit 示例三.使用教程安装Redux Toolkit和React-Redux 创建 Redux Store 为React提供Redux Store 创建Redux State Slice 将Slice Reduc

react 路由Link配置详解

1、Link的to属性

2、Link的replace属性

3、Link传参

代码示例:

相关推荐

随机推荐