• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

react 路由Link配置详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
React Fragment介绍与使用详解发布时间:2022-02-05
下一篇:
Vue3中的Refs和Ref详情发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap