React-Router入门使用-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

React-Router入门使用

简介: React-Router入门使用

React Router 是一个基于React之上的强大路由库,它可以让你向应用中快速地添加视图和数据流,同时保持页面与URL间的同步。

React路由跳转

制作一个平常一样的点击切换路由效果,首先需要安装cnpm install react-router-dom

  • 创建一个根目录AppRouter.js,并仰引入react-router-dom,在创建两个js组件
import React, { Component } from 'react'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom'
import Index from './Index'
import List from './List'
class APPRouter extends Component {
  render() {
    return (
      <Router>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/List/23">列表页</Link>
          </li>
        </ul>
        <Route path="/" exact component={Index}></Route>
        <Route path="/list" component={List}></Route>
      </Router>
    )
  }
}
export default APPRouter
  • exact精准匹配

Index.jsList.js文件中分别写入以下代码

import React, { Component } from 'react'
class Index extends Component {
  render() {
    return <div> 列表页面 </div>
  }
}

export default Index

在这里插入图片描述

ReactRouter动态传值

这就比较常见的根据id跳转页面,显示不同内容.
这个设置是以:开始的,然后紧跟着你传递的key(键名称)名称。

<Route path="/list/:id" component={List}></Route>

就可以在Link上设置值了,模拟一个json数据,点击跳转页面

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

class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      list: [
        { cid: 1, title: '这个是首页1' },
        { cid: 2, title: '这个是首页1' },
        { cid: 3, title: '这个是首页2' }
      ]
    }
  }
  render() {
    return (
      <div>
        <ul>
          {this.state.list.map((item, index) => {
            return (
              <li key={index}>
                <Link to={'/list/' + item.cid}>{item.title}</Link>
              </li>
            )
          })}
        </ul>
      </div>
    )
  }
}

export default Index

怎么接受传过来的id,组件接收传递过来的值的时候,可以在声明周期componentDidMount中进行

  • patch:自己定义的路由规则,可以清楚的看到是可以产地id参数的。
  • url: 真实的访问路径,这上面可以清楚的看到传递过来的参数是什么。
  • params:传递过来的参数,key和value值。

在这里插入图片描述

componentDidMount() {
    console.log(this.props.match)
    //获取传过来的id
    let tempId = this.props.match.params.id
    this.setState({
      id: tempId
    })
  }

以上就是比较简单的react-router使用

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
开发与运维
使用钉钉扫一扫加入圈子
+ 订阅

集结各类场景实战经验,助你开发运维畅行无忧

其他文章
最新文章
相关文章