react 中的路由 Link 和Route

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>

猜你喜欢

转载自www.cnblogs.com/dianzan/p/10968463.html