ReactJS学习系列课程React Router 使用

对于任何一个前端框架都有页面跳转,而这个跳转就一定需要路由的定义,比如Angular,Durandal等等,今天我们学习一下如果定义个路由在React中。

为了便于理解,我们同样附上一段代码,看看究竟是如何实现的:

import React from 'react'
import { render,findDOMNode } from 'react-dom'
import {
  browserHistory,Router,Route,IndexRoute,Link,withRouter
} from 'react-router'
import ContactStore from './ContactStore'
import './app.css'

const App = React.createClass({
  getInitialState() {
    return {
      contacts: ContactStore.getContacts(),loading: true
    }
  },componentWillMount() {
    ContactStore.init()
  },componentDidMount() {
    ContactStore.addChangeListener(this.updateContacts)
  },componentWillUnmount() {
    ContactStore.removeChangeListener(this.updateContacts)
  },updateContacts() {
    if (!this.isMounted())
      return

    this.setState({
      contacts: ContactStore.getContacts(),loading: false
    })
  },render() {
    const contacts = this.state.contacts.map(function (contact) {
      return <li key={contact.id}><Link to={`/contact/${contact.id}`}>{contact.first}</Link></li>
    })

    return (
      <div className="App">
        <div className="ContactList">
          <Link to="/contact/new">New Contact</Link>
          <ul>
            {contacts}
          </ul>
        </div>
        <div className="Content">
          {this.props.children}
        </div>
      </div>
    )
  }
})

const Index = React.createClass({
  render() {
    return <h1>Address Book</h1>
  }
})

const Contact = withRouter(
  React.createClass({

    getStateFromStore(props) {
      const { id } = props ? props.params : this.props.params

      return {
        contact: ContactStore.getContact(id)
      }
    },getInitialState() {
      return this.getStateFromStore()
    },componentDidMount() {
      ContactStore.addChangeListener(this.updateContact)
    },componentWillUnmount() {
      ContactStore.removeChangeListener(this.updateContact)
    },componentWillReceiveProps(nextProps) {
      this.setState(this.getStateFromStore(nextProps))
    },updateContact() {
      if (!this.isMounted())
        return

      this.setState(this.getStateFromStore())
    },destroy() {
      const { id } = this.props.params
      ContactStore.removeContact(id)
      this.props.router.push('/')
    },render() {
      const contact = this.state.contact || {}
      const name = contact.first + ' ' + contact.last
      const avatar = contact.avatar || 'http://placecage.com/50/50'

      return (
        <div className="Contact">
          <img height="50" src={avatar} key={avatar} />
          <h3>{name}</h3>
          <button onClick={this.destroy}>Delete</button>
        </div>
      )
    }
  })
)

const NewContact = withRouter(
  React.createClass({

    createContact(event) {
      event.preventDefault()

      ContactStore.addContact({
        first: findDOMNode(this.refs.first).value,last: findDOMNode(this.refs.last).value
      },(contact) => {
        this.props.router.push(`/contact/${contact.id}`)
      })
    },render() {
      return (
        <form onSubmit={this.createContact}>
          <p>
            <input type="text" ref="first" placeholder="First name" />
            <input type="text" ref="last" placeholder="Last name" />
          </p>
          <p>
            <button type="submit">Save</button> <Link to="/">Cancel</Link>
          </p>
        </form>
      )
    }
  })
)

const NotFound = React.createClass({
  render() {
    return <h2>Not found</h2>
  }
})

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index} />
      <Route path="contact/new" component={NewContact} />
      <Route path="contact/:id" component={Contact} />
      <Route path="*" component={NotFound} />
    </Route>
  </Router>
),document.getElementById('example'))

如果需要使用React-router,我们需要import router核心组件,如上:

import {
browserHistory,withRouter} from ‘react-router’;

我们下面具体分析一下:

  • browserHistory: 主要用于浏览器历史缓存回退。
  • Router: 用于我们定义路由的一个Component,一定记得写。
  • Route: 一个项目我们会有很多路由跳转页面,这是用来指定跳转路径和页面的。
  • IndexRoute: 这个是路由的默认跳转,相当于angular-router的otherwise.
  • Link: 这个相当于一个click 时间的component,可以配合将要跳转的路径。
  • withRouter: 当我们定义一个route,需要指定一个component,这个component我们就可以用withRouter来定义啦。如上。

对于一个路由,我们肯定会想到,怎么能用路由传递一个数值呢,因为在项目中会多次用到,下面我们来看一段代码:

import React from 'react' import { render } from 'react-dom' import { browserHistory,Link } from 'react-router' const User = ({ params: { userID },location: { query } }) => { let age = query && query.showAge ? '33' : '' return ( <div className="User"> <h1>User id: {userID}</h1> {age} </div> ) } const App = ({ children }) => ( <div> <ul> <li><Link to="/user/bob" activeClassName="active">Bob</Link></li> <li><Link to={{ pathname: '/user/bob',query: { showAge: true } }} activeClassName="active">Bob With Query Params</Link></li> <li><Link to="/user/sally" activeClassName="active">Sally</Link></li> </ul> {children} </div> ) render(( <Router history={browserHistory}> <Route path="/" component={App}> <Route path="user/:userID" component={User} /> </Route> </Router> ),document.getElementById('example')) 

其实React路由传值和Angular是非常相像的,比如 path=”user/:userID” ,其中userID就是我们要传递的参数。

获取这个参数也很简单,只需要 params: { userID } 即可。

前面我们讲到,通过Link配置我们将要跳转的页面,Link同样提供了一个location的参数,我们可以在其中配置query参数,获取这个参数和上面一样,例如:

const User = ({ params: { userID },location: { query } }) => {

)
}

如果想深入了解,大家可以自己尝试一下吧!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


react 中的高阶组件主要是对于 hooks 之前的类组件来说的,如果组件之中有复用的代码,需要重新创建一个父类,父类中存储公共代码,返回子类,同时把公用属性...
我们上一节了解了组件的更新机制,但是只是停留在表层上,例如我们的 setState 函数式同步执行的,我们的事件处理直接绑定在了 dom 元素上,这些都跟 re...
我们上一节了解了 react 的虚拟 dom 的格式,如何把虚拟 dom 转为真实 dom 进行挂载。其实函数是组件和类组件也是在这个基础上包裹了一层,一个是调...
react 本身提供了克隆组件的方法,但是平时开发中可能很少使用,可能是不了解。我公司的项目就没有使用,但是在很多三方库中都有使用。本小节我们来学习下如果使用该...
mobx 是一个简单可扩展的状态管理库,中文官网链接。小编在接触 react 就一直使用 mobx 库,上手简单不复杂。
我们在平常的开发中不可避免的会有很多列表渲染逻辑,在 pc 端可以使用分页进行渲染数限制,在移动端可以使用下拉加载更多。但是对于大量的列表渲染,特别像有实时数据...
本小节开始前,我们先答复下一个同学的问题。上一小节发布后,有小伙伴后台来信问到:‘小编你只讲了类组件中怎么使用 ref,那在函数式组件中怎么使用呢?’。确实我们...
上一小节我们了解了固定高度的滚动列表实现,因为是固定高度所以容器总高度和每个元素的 size、offset 很容易得到,这种场景也适合我们常见的大部分场景,例如...
上一小节我们处理了 setState 的批量更新机制,但是我们有两个遗漏点,一个是源码中的 setState 可以传入函数,同时 setState 可以传入第二...
我们知道 react 进行页面渲染或者刷新的时候,会从根节点到子节点全部执行一遍,即使子组件中没有状态的改变,也会执行。这就造成了性能不必要的浪费。之前我们了解...
在平时工作中的某些场景下,你可能想在整个组件树中传递数据,但却不想手动地通过 props 属性在每一层传递属性,contextAPI 应用而生。
楼主最近入职新单位了,恰好新单位使用的技术栈是 react,因为之前一直进行的是 vue2/vue3 和小程序开发,对于这些技术栈实现机制也有一些了解,最少面试...
我们上一节了了解了函数式组件和类组件的处理方式,本质就是处理基于 babel 处理后的 type 类型,最后还是要处理虚拟 dom。本小节我们学习下组件的更新机...
前面几节我们学习了解了 react 的渲染机制和生命周期,本节我们正式进入基本面试必考的核心地带 -- diff 算法,了解如何优化和复用 dom 操作的,还有...
我们在之前已经学习过 react 生命周期,但是在 16 版本中 will 类的生命周期进行了废除,虽然依然可以用,但是需要加上 UNSAFE 开头,表示是不安...
上一小节我们学习了 react 中类组件的优化方式,对于 hooks 为主流的函数式编程,react 也提供了优化方式 memo 方法,本小节我们来了解下它的用...
开源不易,感谢你的支持,❤ star me if you like concent ^_^
hel-micro,模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 ,欢迎关注与了解
本文主题围绕concent的setup和react的五把钩子来展开,既然提到了setup就离不开composition api这个关键词,准确的说setup是由...
ReactsetState的执行是异步还是同步官方文档是这么说的setState()doesnotalwaysimmediatelyupdatethecomponent.Itmaybatchordefertheupdateuntillater.Thismakesreadingthis.staterightaftercallingsetState()apotentialpitfall.Instead,usecom