react-router-dom v^4学习历程（一）

react-router-dom的版本已经更新到了4.1.1，那么咱们就一块儿来学习学习react v4这个新版路由的基本使用吧！

在学习路由以前咱们先须要复习几个基础知识，关于react组件的构建，和分离组件到另外的文件

生成react组件的方式

• 咱们能够采用一个函数来快速生成一个 react组件

观察以下代码

import React from 'react'
const Mycomponent=()=>(
  <div>
    <h2>这是个人第一个函数组件</h2>
  </div>
  
)
ReactDOM.render(<Mycomponent/>,document.getElementById('example'))

渲染组件到根节点上，能够看出没有任何问题。
咱们也能够把这个组件分离到另一个文件中，用es6的 语法import default export导入导出，而后在index.jsx中引用它

//Mycomponent.jsx
import React from 'react'
const Mycomponent=()=>(
  <div>
    <h2>这是个人第一个函数组件</h2>
  </div>
  
)
export default Mycomponent
//index.jsx
import Mycomponent from './Mycomponent'

这样咱们就能够作到函数式构建的react组件在react项目中模块化使用

• 第二种就是咱们经常使用的class方式声明组件

import React from 'react'
    export default class Topic extends React.Component{
    
    render(){
      return (
        <div>
        <h3>{this.props.match.params.topicId}</h3>
      </div>
    
        )
      }
    }

向构造react组件模板的函数中传入路由参数

若是一个react组件做为Route的component属性值，以下

<Route  exact path="/" component={Home}></Route>

• 函数式声明Home时，它的模板定义函数就会默认接受一个对象做为参数，里面包含了路由的各类信息
  

这样咱们就能够利用模板定义函数参数中的信息获取到路由中的参数。
`

const Topic=({match})=>//es6语法将参数对象中的match属性
 (                         //赋值给参数match
 <div>
<h3>{match.params.topicId}</h3>
 </div>
)

• 若是是用类的方式声明的组件那么获取路由参数信息的办法是在jsx渲染模板中
  this.props.match.params

---

预备知识完毕，下面咱们就看看怎么作一个react路由

路由基本用法

路由要解决的基本需求是从一个连接点击到另一个连接，在页面中无刷新跳转到页面的另一部份内容。相似于tabs面板。
例若有以下界面

三个组件以下：

const App=()=>(
  <h2>主页</h2>
)
const Hot=()=>(<div><h2>热门</h2></div>)
const Content=()=>(
  <h2>文章</h2>
)
const Zhuanlan=()=>(<div>
  <h2>专栏</h2>
</div>)

那么在须要使用路由的页面组件里面，渲染以下模板

import {Link,Route,BrowserRouter as Router} from 'react-router-dom' 
  (<Router>
  <div>
    <ul>
      <li><Link to="/">主页</Link></li>
      <li><Link to="/hot">热门</Link></li>
      <li><Link to="/zhuanlan">专栏</Link></li>
    </ul>
    <hr/>
    <Route  exact path="/" component={App}></Route>
    <Route path="/hot" component={Hot} ></Route>
    <Route path="/zhuanlan" component={Zhuanlan}></Route>
  </div>
</Router>)

注意使用Router做为最外层标签，里面只能有一个一级子节点，用Link来导航 ，to指定路径，Route指定要导航到的组件，这样一个路由的基本使用就成型了。exact用于精准匹配路径，不用exact也会匹配到匹配的路径的子路径，这样两个路由组件都会显示。咱们须要的是每次切换只会显示一个Route中指定的组件

路由的嵌套和路径中参数传递

• 在一个子组件Hot中，再嵌套一个子路由咱们应该怎么作？
  很简单就是把路由Route再写入Hot的模板中实现路由嵌套。

• 路径中传递参数到路由到的组件，就是在路径前面加上: ,这样这个路由地址就会变成一个参数被组件接受到。例如${match.url}/:id
  ${match.url}能够获取到当前的基础路径。而后在路由用到的组件中能够用

match.params(函数式声明的组件中,match须要在函数参数中引入)或this.props.match.params（React class类render函数中）
示例以下

///父组件中
    const Hot=({match})=>(<div>
    
    <h2>热门</h2>
    <Link to={`${match.url}/article`}>文章</Link>
    <Link to={`${match.url}/qa`}>问答</Link>
    <Link to={`${match.url}/news`}>新闻</Link>
    <hr/>
    <Route path={`${match.url}/:type`} component={Content}></Route>
    
    </div>)
    //子组件中
    const Content=({match})=>(
  <div>
  <h2>热门子目录</h2>
<p>{match.params.type}</p>
  </div>
)

总结
1.组件生成的方式有两种，render在类中显式渲染，函数生成。
2.路由的基本用法Router>Route path component指定路径和组件，Link添加导航按钮连接，to指定路径地址
3.路由的嵌套，直接在子组件模板中添加Route，Link，match.url引入基础路径
4.路由路径参数传递到模板，用baseUrl/:id相似格式，组件中用match.params.id接收。