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()
{
{}
let obj={pathname:"/me",search:'?username=admin',hash:"#abc",state:{msg:'hello'}}
return(
<div id='app'>
{}
<Router>
{}
<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>
{}
</Router>
{}
{}
<Router basename='/admin'>
<div>
<div className='nav'>
<Link to='/'>Home</Link>
<Link to='/product/123'>Product</Link>
{}
<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内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
