react 中的路由 Link 和Route和NavLink
2024-08-31 01:26:06
route是配置,link是使用
https://blog.csdn.net/chern1992/article/details/77186118(copy)
嵌套路由一般使用Route,类似于vue中的作为嵌套路由的渲染,可以直接通过固定路由进入某一局部,等同于局部切换
// index.js
// ...
render((
<Router history={hashHistory}>
<Route path="/" component={App}>
{/* 注意这里把两个子组件放在Route里嵌套在了App的Route里/}
<Route path="/repos" component={Repos}/>
<Route path="/about" component={About}/>
</Route>
</Router>
), document.getElementById('app'))
Link进行的是路由切换跳转,整个单页面已经切换,而且能知道指向的路径是否是一个有效的路由
// modules/NavLink.js
import React from 'react'
import { Link } from 'react-router' export default React.createClass({
render() {
return <Link {...this.props} activeClassName="active"/>
}
})
// modules/App.js
import NavLink from './NavLink' // ... <li><NavLink to="/about">About</NavLink></li>
<li><NavLink to="/repos">Repos</NavLink></li>
NavLink
<NavLink>是<Link>的一个特定版本,会在匹配上当前的url的时候给已经渲染的元素添加参数,组件的属性有
activeClassName(string):设置选中样式,默认值为active
activeStyle(object):当元素被选中时,为此元素添加样式
exact(bool):为true时,只有当导致和完全匹配class和style才会应用
strict(bool):为true时,在确定为位置是否与当前URL匹配时,将考虑位置pathname后的斜线
isActive(func)判断链接是否激活的额外逻辑的功能
// activeClassName选中时样式为selected
<NavLink
to="/faq"
activeClassName="selected"
>FAQs</NavLink> // 选中时样式为activeStyle的样式设置
<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs</NavLink> // 当event id为奇数的时候,激活链接
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
} <NavLink
to="/events/123"
isActive={oddEvent}
>Event 123</NavLink>
最新文章
- oracle函数
- chrome谷歌浏览器插件制作简易教程
- js操作table
- Cocos2dx 3.x包含ext库报错解决
- 【NOIP合并果子】uva 10954 add all【贪心】——yhx
- 使用工具追踪Entity Framework生成的SQL
- So easy Webservice 1.Socket建设web服务
- 第4章 管道和FIFO
- JDBC编程步骤
- start.s中的.balignl 16,0xdeadbeef
- HW4.44
- seajs的那些坑
- (原创)ubuntu 10.04+ruby1.9.2+rails3 安装记录
- 阿里开源分布式事务解决方案 Fescar
- CSS代码片段
- 我的微信小程序第二篇
- 对C# .Net4.5异步机制测试
- 浅谈SpringMVC
- Java集合类: Set、List、Map、Queue使用场景
- 网页瀑布流布局插件Masonry