react 中的路由 Link 和Route和NavLink

地板油 發表於 2019-6-3 16:42:00

route是配置，link是使用
https://blog.csdn.net/chern1992/article/details/77186118（copy）
嵌套路由一般使用Route,类似于vue中的作为嵌套路由的渲染，可以直接通过固定路由进入某一局部，等同于局部切换
<div class="cnblogs_code">
<pre>// 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'))</pre>
</div>
Link进行的是路由切换跳转，整个单页面已经切换，而且能知道指向的路径是否是一个有效的路由
<div class="cnblogs_code">
<pre>// 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></pre>
</div>
 
NavLink <NavLink>是<Link>的一个特定版本，会在匹配上当前的url的时候给已经渲染的元素添加参数，组件的属性有
activeClassName(string)：设置选中样式，默认值为active activeStyle(object)：当元素被选中时，为此元素添加样式 exact(bool)：为true时，只有当导致和完全匹配class和style才会应用 strict(bool)：为true时，在确定为位置是否与当前URL匹配时，将考虑位置pathname后的斜线 isActive(func)判断链接是否激活的额外逻辑的功能
<div class="cnblogs_code">
<pre>// 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></pre>
</div>
  
来源：https://www.cnblogs.com/dianzan/p/10968463.html

頁: [1]

琼殿技术论坛's Archiver

react 中的路由 Link 和Route和NavLink