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接收。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!