如何理解react路由Link配置

如何理解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将跳转前的上一个页面替换成当前页面,只将当前页面入栈

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重命名为Routerimport {BrowserRouter as Router,Link,Route} from 'react-router-dom'import { Button } from 'antd';import './App.css';function Home(){  return(      
admin首页
    )}function Me(props){  console.log(props)  return(      
admin我的
    )}function Product(props){  return(      
admin产品页面:{props.match.params.id}
    )}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(        
      {/*BrowserRouter可以放多个*/}                          {/*因为组件也是返回html内容,故可以直接通过函数返回html内容充当组件,但不能直接写html内容*/}          
              
首页
}>            
product
}>            
me
}>          
          {/*首页2
}}>*/}                                      {/*BrowserRouter内部只能有一个根容器,包裹其他内容*/}        {/*添加basename='/xx'后,点击Link跳转其他路由时,url会将/xx添加到路由名前,所以使用路由路径和加了admin的路由路径都能匹配该路由*/}                      
                
                    Home                    Product                  {/*可在对应的组件中输出props查看传入的对象的信息,添加replace将跳转前的上一个页面替换成当前页面,只将当前页面入栈*/}                    个人中心