路由基本使用 + 路由组件与一般组件 + NavLink

路由基本使用(React-router-dom)

React.js只提供 UI （view）层面的解决方案（MVC中的V）。在实际的项目当中，它并不能解决我们所有的问题，需要结合其它的库，例如 Redux、React-router 等来协助提供完整的解决方案。

介绍

React-router4（以下简称RR4）遵循React的设计万物皆组件的理念。所以只是一堆 提供了导航功能的组件，具有声明式（引入即用），可组合性的特点

• 组成部分:
• react-router 核心，是浏览器和原生应用的通用部分，不提供dom操作进行跳转的api。
• react-router-dom 基于浏览器环境的开发。

安装

浏览器开发就只需要安装react-router-dom

npm install react-router-dom --save

安装 react-router-dom，都会自动将 react-router 作为依赖安装

技术查询网站：印记中文

路由组件与一般组件

路由组件

<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>

About 和 Home 就称为路由组件 

一般组件：就是正常引入的组件，没有通过component渲染出来的
路由组件和一般组件的区别是：路由组件能轻松获取路由三件套

history
location
match

正常情况下一般组件是获取不到上述的三件套的，想要获取通过

withRouter高阶组件
withRouter(一般组件)

NavLink

NavLink 可以让点击那个路由链接可以让那个高亮（Booststrap）

import MyNavLink from './components/MyNavLink'
// MyNavLink 是我下面对NavLink的封装
<div className="row">
  <div className="col-xs-2 col-xs-offset-2">
    <div className="list-group">
      {/* 在react中靠路由链接实现切换组件 */}
      <NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink>
      <NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</NavLink>
     
------------------------------------------------------------
      MyNavLink 对NavLink的封装
      <MyNavLink to="/about">About</MyNavLink>
      <MyNavLink to="/home">Home</MyNavLink>
    </div>
</div>

<div className="col-xs-6">
  <div className="panel">
    <div className="panel-body">
       {/* 注册路由 */}
      <Route path="/about" component={About}/>
      <Route path="/home" component={Home}/>
    </div>
  </div>
</div>

封装NavLink

import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'

export default class MyNavLink extends Component {
  render() {
    console.log(this.props);
    const {title} = this.props
    return (
      <NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
    )
  }
}