React嵌套路由的使用
React嵌套路由
嵌套路由原则:可以无限嵌套,但是必须要让使用二级路由的一级路由匹配到,否则不显示
代码使用
首先,我们在根组件中引入组件login
-
<Link to='/login?name=张三&age=18'>登录</Link>
-
<Route path='/login' component={login}></Route>
注意:路由嵌套传值只能使用query方式的传值,params传参方式他会出现不知道该解析那个路由,导致实现不了路由嵌套
接着,我们在login组件中引入组件All
-
<Link to='/login/All'>全部</Link>
-
<Route path='/login/All' component={All}></Route>
这样,我们就实现了react路由的嵌套
NavLink标签使用方式
作用:NavLink可以让a标签带有active切换的效果
引入:import { NavLink, Route } from 'react-router-dom';
代码使用:
-
<NavLink to='/login/All' activeClassName='so'>全部</NavLink>
-
<NavLink to='/login/Al' activeClassName='so'>史蒂夫</NavLink>
-
-
<Route path='/login/All' component={All}></Route>
-
<Route path='/login/Al' component={All}></Route>
给他设置了一个背景颜色蓝色
效果演示
点击NavLink标签时,实现背景效果的切换
withRouter内置组件的使用
作用:将普通的组件,变成可以访问路由api的路由组件
代码使用
我们在二级路由下的All组件中使用withRouter内置组件,我们给他一个点击事件
-
import { withRouter } from 'react-router-dom'
-
-
class All extends Component {
-
jup=()=>{
-
this.props.history.push('/')
-
}
-
render() {
-
return (
-
<div onClick={this.jup}>hello React</div>
-
)
-
}
-
}
-
export default withRouter(All)
当我们点击时,让他跳转到我们的根页面中
路由拦截
可以使用Route中的render方法
<Route path="/center" render={()=>isAuth()?<Center/>:<Login/>}/>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhffkicg
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
excel下划线不显示怎么办
PHP中文网 06-23 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
photoshop蒙版画笔没反应怎么办
PHP中文网 06-24