react 中的路由 Link 和Route和NavLink

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>