react-router-dom v^4进修进程（一）

2019年8月25日 172次阅读 来源: Ajaxyz

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时，它的模板定义函数就会默许吸收一个对象作为参数，内里包含了路由的种种信息
    《react-router-dom v^4进修进程（一）》

如许我们就能够应用模板定义函数参数中的信息猎取到路由中的参数。
`

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

  • 假如是用类的体式格局声明的组件那末猎取路由参数信息的方法是在jsx衬着模板中
    this.props.match.params

准备学问终了，下面我们就看看怎样做一个react路由

路由基本用法

路由要处理的基本需求是从一个链接点击到别的一个链接，在页面中无革新跳转到页面的别的一部分内容。相似于tabs面板。
比方有以下界面《react-router-dom v^4进修进程（一）》

三个组件以下：

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

    原文作者：Ajaxyz
    原文地址: https://segmentfault.com/a/1190000009349377
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞