标签：使用 nts element selected article 参数 添加 router pos
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>
标签：使用 nts element selected article 参数 添加 router pos
原文地址：https://www.cnblogs.com/dianzan/p/10968463.html
