由淺入深地教你開(kāi)發(fā)自己的 React Router v4

alin 發(fā)布于2019-08-20 15:39 / 538人閱讀

摘要：也就是說(shuō)通過(guò)我們自己構(gòu)建來(lái)解釋是否是一個(gè)合適的路由抽象。首先，并不需要，因?yàn)槿绻酚芍袥](méi)有給那么將會(huì)自動(dòng)渲染?；旧衔覀兊穆酚芍灰P(guān)心的變化并且返回相應(yīng)的即可。為了解決這個(gè)問(wèn)題，需要跟蹤每一條并且當(dāng)路由發(fā)生改變的時(shí)候調(diào)用。

作者：Tyler

編譯：胡子大哈

翻譯原文：http://huziketang.com/blog/posts/detail?postId=58d36df87413fc2e82408555

英文原文：Build your own React Router v4)

轉(zhuǎn)載請(qǐng)注明出處，保留原文鏈接以及作者信息

我還記得我第一次學(xué)習(xí)開(kāi)發(fā)客戶端應(yīng)用路由時(shí)的感覺(jué)，那時(shí)候我還是一個(gè)涉足在“單頁(yè)面應(yīng)用”的未出世的小伙子，那會(huì)兒，要是說(shuō)它沒(méi)把我的腦子弄的跟屎似的，那我是在撒謊。一開(kāi)始的時(shí)候，我的感覺(jué)是我的應(yīng)用程序代碼和路由代碼是兩個(gè)獨(dú)立且不同的體系，就像是兩個(gè)同父異母的兄弟，互相不喜歡但是又不得不在一起。

經(jīng)過(guò)了一些年的努力，我終于有幸能夠教其他開(kāi)發(fā)者關(guān)于路由的一些問(wèn)題了。我發(fā)現(xiàn)，好像很多人對(duì)于這個(gè)問(wèn)題的思考方式都和我當(dāng)時(shí)很類(lèi)似。我覺(jué)得有幾個(gè)原因。首先，路由問(wèn)題確實(shí)很復(fù)雜，對(duì)于那些路由庫(kù)的開(kāi)發(fā)者而言，找到一個(gè)合適的路由抽象概念來(lái)解釋這個(gè)問(wèn)題就更加復(fù)雜。第二，正是由于路由的復(fù)雜性，這些路由庫(kù)的使用者傾向于只使用庫(kù)就好了，而不去弄懂到底背后是什么原理。

本文中，我們會(huì)深入地來(lái)闡述這兩個(gè)問(wèn)題。我們會(huì)通過(guò)創(chuàng)建一個(gè)簡(jiǎn)單版本的 React Router v4 來(lái)解決第二個(gè)問(wèn)題，而通過(guò)這個(gè)過(guò)程來(lái)闡釋第一個(gè)問(wèn)題。也就是說(shuō)通過(guò)我們自己構(gòu)建 RRv4 來(lái)解釋 RRv4 是否是一個(gè)合適的路由抽象。

下面是將要用來(lái)測(cè)試我們所構(gòu)建的 React Router 的代碼。最終的代碼實(shí)例你可以在這里得到。

const Home = () => (
  Home
)
const About = () => (
  About
)
const Topic = ({ topicId }) => (
  {topicId}
)
const Topics = ({ match }) => {
  const items = [
    { name: "Rendering with React", slug: "rendering" },
    { name: "Components", slug: "components" },
    { name: "Props v. State", slug: "props-v-state" },
  ]
  return (
    
      Topics
      
        {items.map(({ name, slug }) => (
          
            {name}
          
        ))}
      
      {items.map(({ name, slug }) => (
         (
            
        )} />
      ))}
       (
        Please select a topic.
      )}/>
    
  )
}
const App = () => (
  
    
      Home
      About
      Topics
    
    
    
    
    
  
)

如果你還不熟悉 React Router v4，就先了解幾個(gè)基本問(wèn)題。Route 用來(lái)渲染 UI，當(dāng)一個(gè) URL 匹配上了你所指定的路由路徑，就進(jìn)行渲染。Link 提供了一個(gè)可以瀏覽訪問(wèn)你 app 的方法。換句話講，Link 組件允許你更新你的 URL，而 Route 組件根據(jù)你所提供的新 URL 來(lái)改變 UI。

本文并不會(huì)手把手的教你 RRV4 的基礎(chǔ)，所以如果上面的代碼你看起來(lái)很費(fèi)勁的話，可以先來(lái)這里看一下官方文檔。把玩一下里面的例子，當(dāng)你覺(jué)得順手了的時(shí)候，歡迎回來(lái)繼續(xù)閱讀。

如上段所說(shuō)，路由給我們提供了兩個(gè)組件可以用于你的 app：Link 和 Route。我喜歡 React Router v4 的原因是它的 API “只是組件”而已，可以理解成沒(méi)有引入其他概念。這就是說(shuō)如果你對(duì) React 很熟悉的話，那么你對(duì)組件以及怎么組合組件一定有自己的理解，而這對(duì)于你寫(xiě)路由代碼依然適用。這就很方便了，因?yàn)橐呀?jīng)熟悉了如何創(chuàng)造組件，那么創(chuàng)建你自己的 React Router 就只是做你已經(jīng)熟悉的事情——?jiǎng)?chuàng)建組件。

現(xiàn)在就來(lái)一起創(chuàng)建我們的 Route 組件。在上面的例子中，可以注意到使用了三個(gè)屬性：exact、path 和 component。他們的屬性類(lèi)型（propTypes）對(duì)于 Route 組件來(lái)是這樣的：

static propTypes = {
  exact: PropTypes.bool,
  path: PropTypes.string,
  component: PropTypes.func,
}

這里有些小細(xì)節(jié)。首先，path 并不需要，因?yàn)槿绻酚芍袥](méi)有給 path 那么將會(huì)自動(dòng)渲染。第二，component 也不需要，是因?yàn)槿绻窂狡ヅ渖狭耍泻芏嗖煌姆椒▉?lái)告訴 React Router 要渲染什么 UI。其中一個(gè)上面沒(méi)有提到的方法就是使用 render 來(lái)通知 React Router，具體代碼像這樣：

 {
  return 
}} />

render 允許你創(chuàng)建一個(gè)直接返回 UI 的內(nèi)聯(lián)函數(shù)而不用創(chuàng)建額外的組件，所以我們也可以把它添加到 proTypes 中：

static propTypes = {
  exact: PropTypes.bool,
  path: PropTypes.string,
  component: PropTypes.func,
  render: PropTypes.func,
}

現(xiàn)在我們知道了 Route 接收的屬性，我們來(lái)了解一下它們的具體功能。還記得上面說(shuō)的：“當(dāng) URL 匹配上了你所指定的路由 path 以后，Route 渲染其對(duì)應(yīng)的 UI”?；谶@樣的定義，可以知道，需要一些功能性函數(shù)，來(lái)判斷當(dāng)前的 URL 是否匹配上了組件的 path 屬性。如果匹配上了，那么返回渲染的 UI；如果沒(méi)有那么什么都不做并且返回 null。

一起來(lái)看一下這個(gè)匹配函數(shù)應(yīng)該怎么寫(xiě)，暫且把它叫做 matchPath 吧。

class Route extends Component {
  static propTypes = {
    exact: PropTypes.bool,
    path: PropTypes.string,
    component: PropTypes.func,
    render: PropTypes.func,
  }
  render () {
    const {
      path,
      exact,
      component,
      render,
    } = this.props
    const match = matchPath(
      location.pathname, // 全局 DOM 變量
      { path, exact }
    )
    if (!match) {
      // 什么都不做，因?yàn)闆](méi)有匹配上 path 屬性
      return null
    }
    if (component) {
      // 如果當(dāng)前地址匹配上了 path 屬性
      // 以 component 創(chuàng)建新元素并且通過(guò) match 傳遞
      return React.createElement(component, { match })
    }
    if (render) {
      // 如果匹配上了且 component 沒(méi)有定義
      // 則調(diào)用 render 并以 match 作為參數(shù)
      return render({ match })
    }
    return null
  }
}

上面的代碼即實(shí)現(xiàn)了：如果匹配上了 path 屬性，就返回 UI，否則什么也不做。

我們?cè)賮?lái)談一下路由的問(wèn)題。在客戶端應(yīng)用這邊，一般來(lái)講只有兩種方式更新 URL。一種是用戶點(diǎn)擊 a 標(biāo)簽，一種是點(diǎn)擊后退/前進(jìn)按鈕?；旧衔覀兊穆酚芍灰P(guān)心 URL 的變化并且返回相應(yīng)的 UI 即可。假設(shè)我們知道更新 URL 的方式只有上面兩種，那么就可以針對(duì)這兩種情況做特殊處理了。稍后在構(gòu)建組件的時(shí)候再詳細(xì)介紹 a 標(biāo)簽的情況，這里先討論后退/前進(jìn)按鈕。 React Router 使用了 History工程里的 .listen 方法來(lái)監(jiān)聽(tīng)當(dāng)前 URL 的變化，為了避免再引入其他的庫(kù)，我們使用 HTML5 的 popstate 事件來(lái)實(shí)現(xiàn)這一功能。當(dāng)用戶點(diǎn)擊了后退/前進(jìn)按鈕，popstate 就被觸發(fā)，我們需要的就是這個(gè)功能。因?yàn)?Route 渲染 UI 是根據(jù)當(dāng)前 URL來(lái)做的，因此給 Route 配上監(jiān)聽(tīng)能力也是合理的，在 popstate 觸發(fā)的地方重新渲染 UI。就是說(shuō)在觸發(fā) popstate 時(shí)檢查是否匹配上了新的 URL，如果是則渲染 UI，如果不是，什么也不做，下面看一下代碼。

class Route extends Component {
  static propTypes: {
    path: PropTypes.string,
    exact: PropTypes.bool,
    component: PropTypes.func,
    render: PropTypes.func,
  }
  componentWillMount() {
    addEventListener("popstate", this.handlePop)
  }
  componentWillUnmount() {
    removeEventListener("popstate", this.handlePop)
  }
  handlePop = () => {
    this.forceUpdate()
  }
  render() {
    const {
      path,
      exact,
      component,
      render,
    } = this.props
    const match = matchPath(location.pathname, { path, exact })
    if (!match)
      return null
    if (component)
      return React.createElement(component, { match })
    if (render)
      return render({ match })
    return null
  }
}

這里要注意的是我們只是加了一個(gè) popstate 監(jiān)聽(tīng)，當(dāng) popstate 觸發(fā)的時(shí)候，調(diào)用 forceUpdate 來(lái)強(qiáng)制做重新渲染的判斷。

這樣就實(shí)現(xiàn)了所有的都會(huì)監(jiān)聽(tīng)，根據(jù)后退/前進(jìn)按鈕來(lái)“重匹配”、“重判斷”和“重渲染”。

到現(xiàn)在，我們一直還沒(méi)有實(shí)現(xiàn)的是 matchPath 函數(shù)。這個(gè)函數(shù)在我們的 router 中是特別關(guān)鍵的，因?yàn)樗桥袛喈?dāng)前 URL 是否匹配上了組件的關(guān)鍵點(diǎn)。matchPath 值得注意的一點(diǎn)是一定要把的 exact 考慮清楚。如果你對(duì) exact 還不了解，看下下面這句話，給出了規(guī)范文檔中的解釋?zhuān)?/p>

只有當(dāng)所給路徑精確匹配上 location.pathname 時(shí)才返回 true。

接下來(lái)就來(lái)具體實(shí)現(xiàn) matchPath 函數(shù)。如果你回頭看一下上面 Route 組件的代碼，你可以看到 matchPath 函數(shù)是這樣的：

const match = matchPath(location.pathname, { path, exact })

這里的 match 要么是對(duì)象，要么是 null，這得取決于是否匹配上 path。根據(jù)這個(gè)聲明，我們來(lái)寫(xiě) matchPath 代碼：

const matchPatch = (pathname, options) => {
  const { exact = false, path } = options
}

這里使用 ES6 語(yǔ)法。上面的意思是，創(chuàng)建一個(gè)叫做 exact 的變量，使其等于 options.exact，并且如果非 null 的話則設(shè)置其為 false。同樣創(chuàng)建一個(gè)叫做 path 的變量，使其等于 options.path。

接下來(lái)就添加判斷是否匹配。React Router 使用 pathToRegex 來(lái)實(shí)現(xiàn)，只需要寫(xiě)簡(jiǎn)單的正則匹配就可以了。

const matchPatch = (pathname, options) => {
  const { exact = false, path } = options
  if (!path) {
    return {
      path: null,
      url: pathname,
      isExact: true,
    }
  }
  const match = new RegExp(`^${path}`).exec(pathname)
}

如果匹配上了，那么返回一個(gè)包含有所有匹配串的數(shù)組，否則返回 null。

下面是我們示例 app 的路由 "/topics/components" 的一些匹配項(xiàng)。

注意：每個(gè)  都在自己的渲染方法里調(diào)用 matchPath，所以要為每個(gè)  配一個(gè) match。

現(xiàn)在我們要做的是添加判斷是否有匹配的代碼：

const matchPatch = (pathname, options) => {
  const { exact = false, path } = options
  if (!path) {
    return {
      path: null,
      url: pathname,
      isExact: true,
    }
  }
  const match = new RegExp(`^${path}`).exec(pathname)
  if (!match) {
    // 沒(méi)有匹配上
    return null
  }
  const url = match[0]
  const isExact = pathname === url
  if (exact && !isExact) {
    // 匹配上了，但是不是精確匹配
    return null
  }
  return {
    path,
    url,
    isExact,
  }
}

提示一下之前有講過(guò)的，對(duì)于用戶來(lái)講，有兩種方式更新 URL：通過(guò)后退/前進(jìn)按鈕和通過(guò)點(diǎn)擊 a 標(biāo)簽。對(duì)于后退/前進(jìn)點(diǎn)擊來(lái)說(shuō)，使用 popstate 事件給 Route 添加監(jiān)聽(tīng)就可以，現(xiàn)在來(lái)看一下如何通過(guò) Link 解決 a 標(biāo)簽問(wèn)題。

Link 的 API 如下：

這里 to 是一個(gè) string 類(lèi)型，指的是要鏈接到的地址。replace 是一個(gè)布爾值，如果是 true，那么點(diǎn)擊鏈接將替換當(dāng)前的實(shí)體到歷史堆棧，而不是添加一個(gè)新的進(jìn)去。

添加這些 propTypes 到 Link 組件就得到：

class Link extends Component {
  static propTypes = {
    to: PropTypes.string.isRequired,
    replace: PropTypes.bool,
  }
}

我們知道在 Link 組件中的渲染函數(shù)需要返回一個(gè) a 標(biāo)簽，但是我們不想每次變路由都進(jìn)行一次全頁(yè)面刷新，所以通過(guò)增加一個(gè) onClick 處理程序來(lái)劫持 a 標(biāo)簽。

class Link extends Component {
  static propTypes = {
    to: PropTypes.string.isRequired,
    replace: PropTypes.bool,
  }
  handleClick = (event) => {
    const { replace, to } = this.props
    event.preventDefault()
    // 這里是路由
  }
  render() {
    const { to, children} = this.props
    return (
      
        {children}
      
    )
  }
}

ok，代碼寫(xiě)到現(xiàn)在，就差更改當(dāng)前 URL 了。在 React Router 是使用 History 工程里面的 push 和 replace 方法。為了避免增加新依賴，這里我使用 HTML5 的 pushState 和 replaceState。

本文中我們?yōu)榱朔乐挂腩~外的依賴，一直也沒(méi)采用 History 庫(kù)。但是它對(duì)真實(shí)的 React Router 卻是至關(guān)重要的，因?yàn)樗鼘?duì)不同的 session 管理和不同的瀏覽器環(huán)境進(jìn)行了規(guī)范化處理。

pushState 和 replaceState 都接收三個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)與歷史實(shí)體相關(guān)聯(lián)的對(duì)象，我們不需要，所以設(shè)置成一個(gè)空對(duì)象。第二個(gè)參數(shù)是標(biāo)題，我們也不需要，所以也設(shè)置成空。第三個(gè)是我們需要使用的，指的是：相關(guān) URL。

const historyPush = (path) => {
  history.pushState({}, null, path)
}
const historyReplace = (path) => {
  history.replaceState({}, null, path)
}

在 Link 組件內(nèi)部，會(huì)調(diào)用 historyPush 或者 historyReplace，依賴于前面提到的 replace 屬性。

class Link extends Component {
  static propTypes = {
    to: PropTypes.string.isRequired,
    replace: PropTypes.bool,
  }
  handleClick = (event) => {
    const { replace, to } = this.props
    event.preventDefault()
    replace ? historyReplace(to) : historyPush(to)
  }
  render() {
    const { to, children} = this.props
    return (
      
        {children}
      
    )
  }
}

現(xiàn)在就只剩下最后一件很關(guān)鍵的問(wèn)題了，如果你想把上面的例子用在自己的路由代碼里面，你需要注意這個(gè)問(wèn)題。當(dāng)你瀏覽時(shí)，URL 會(huì)發(fā)生改變，但是 UI 卻沒(méi)有刷新，這是為什么呢？這是因?yàn)?，盡管你通過(guò) historyReplace 或者 historyPush 改變了地址，但是并沒(méi)有意識(shí)到已經(jīng)改變了，也不知道應(yīng)該重匹配和重渲染。為了解決這個(gè)問(wèn)題，需要跟蹤每一條并且當(dāng)路由發(fā)生改變的時(shí)候調(diào)用 forceUpdate。

React Router 通過(guò)設(shè)置狀態(tài)、上下文和歷史信息的組合來(lái)解決這個(gè)問(wèn)題。監(jiān)聽(tīng)路由組件的內(nèi)部代碼。

為了使路由簡(jiǎn)單，我們通過(guò)把所有路由對(duì)象放到一個(gè)數(shù)組里的方式來(lái)實(shí)現(xiàn) 跟蹤。每當(dāng)發(fā)生地址改變的時(shí)候，就遍歷一遍數(shù)組，調(diào)用相應(yīng)對(duì)象的 forceUpdate 函數(shù)。

let instances = []
const register = (comp) => instances.push(comp)
const unregister = (comp) => instances.splice(instances.indexOf(comp), 1)

注意這里創(chuàng)建了兩個(gè)函數(shù)。當(dāng) “裝配”上，就調(diào)用 register；當(dāng)“解裝配”，就調(diào)用 unregister。然后只要調(diào)用 historyPush 或者 historyReplace（實(shí)際上用戶每次點(diǎn)擊都會(huì)調(diào)用），就遍歷對(duì)象數(shù)組，并調(diào)用 forceUpdate。

首先更新組件：

class Route extends Component {
  static propTypes: {
    path: PropTypes.string,
    exact: PropTypes.bool,
    component: PropTypes.func,
    render: PropTypes.func,
  }
  componentWillMount() {
    addEventListener("popstate", this.handlePop)
    register(this)
  }
  componentWillUnmount() {
    unregister(this)
    removeEventListener("popstate", this.handlePop)
  }
...
}

再更新 historyPush 和 historyReplace：

const historyPush = (path) => {
  history.pushState({}, null, path)
  instances.forEach(instance => instance.forceUpdate())
}
const historyReplace = (path) => {
  history.replaceState({}, null, path)
  instances.forEach(instance => instance.forceUpdate())
}

這時(shí)只要被點(diǎn)擊并且地址發(fā)生變化，每個(gè) 都會(huì)接收到消息，并且進(jìn)行重匹配和重渲染。

這就完成了所有的路由代碼了，并且實(shí)例 app 用這些代碼可以完美運(yùn)行！

import React, { PropTypes, Component } from "react"
let instances = []
const register = (comp) => instances.push(comp)
const unregister = (comp) =>      instances.splice(instances.indexOf(comp), 1)
const historyPush = (path) => {
  history.pushState({}, null, path)
  instances.forEach(instance => instance.forceUpdate())
}
const historyReplace = (path) => {
  history.replaceState({}, null, path)
  instances.forEach(instance => instance.forceUpdate())
}
const matchPath = (pathname, options) => {
  const { exact = false, path } = options
  if (!path) {
    return {
      path: null,
      url: pathname,
      isExact: true
    }
  }
  const match = new RegExp(`^${path}`).exec(pathname)
  if (!match)
    return null
  const url = match[0]
  const isExact = pathname === url
  if (exact && !isExact)
    return null
  return {
    path,
    url,
    isExact,
  }
}
class Route extends Component {
  static propTypes: {
    path: PropTypes.string,
    exact: PropTypes.bool,
    component: PropTypes.func,
    render: PropTypes.func,
  }
  componentWillMount() {
    addEventListener("popstate", this.handlePop)
    register(this)
  }
  componentWillUnmount() {
    unregister(this)
    removeEventListener("popstate", this.handlePop)
  }
  handlePop = () => {
    this.forceUpdate()
  }
  render() {
    const {
      path,
      exact,
      component,
      render,
    } = this.props
    const match = matchPath(location.pathname, { path, exact })
    if (!match)
      return null
    if (component)
      return React.createElement(component, { match })
    if (render)
      return render({ match })
    return null
  }
}
class Link extends Component {
  static propTypes = {
    to: PropTypes.string.isRequired,
    replace: PropTypes.bool,
  }
  handleClick = (event) => {
    const { replace, to } = this.props
    event.preventDefault()
    replace ? historyReplace(to) : historyPush(to)
  }
  render() {
    const { to, children} = this.props
    return (
      
        {children}
      
    )
  }
}

另外：React Router API 還自然派生出了組件。使用上面我們寫(xiě)的代碼，這個(gè)組件可以直接寫(xiě)成：

class Redirect extends Component {
  static defaultProps = {
    push: false
  }
  static propTypes = {
    to: PropTypes.string.isRequired,
    push: PropTypes.bool.isRequired,
  }
  componentDidMount() {
    const { to, push } = this.props
    push ? historyPush(to) : historyReplace(to)
  }
  render() {
    return null
  }
}

注意這個(gè)組件并不渲染任何 UI，它只用來(lái)做路由定向使用。

我希望這篇文章對(duì)你在認(rèn)識(shí) React Router 上有所啟發(fā)。我總跟我的朋友們講，React 會(huì)使你成為一個(gè)好的 JavaScript 程序員，而 React Router 會(huì)使你成為一個(gè)好的 React 程序員。因?yàn)橐磺薪詾榻M件，你懂 React，你就懂 React Router。

我最近正在寫(xiě)一本《React.js 小書(shū)》，對(duì) React.js 感興趣的童鞋，歡迎指點(diǎn)。

GPU云服務(wù)器云服務(wù)器 react router cdn react-router react-router4 react-router-redux

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/82409.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

alin

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

C | 指針的相關(guān)知識(shí)（二）

閱讀 3585·2021-10-11 10:59
內(nèi)存函數(shù)實(shí)現(xiàn)和詳解

閱讀 1601·2021-09-29 09:35
基于SSH的在線駕?？荚囅到y(tǒng)

閱讀 2269·2021-09-26 09:46
汽車(chē)行業(yè)全渠道一站式解決方案

閱讀 3785·2021-09-10 10:50
css

閱讀 961·2019-08-29 12:17
你可能知道的 javaScript 數(shù)據(jù)結(jié)構(gòu)與算法

閱讀 830·2019-08-26 13:40
關(guān)于前端數(shù)據(jù)&邏輯的思考

閱讀 2443·2019-08-26 11:44
requestAnimationFrame Web中寫(xiě)動(dòng)畫(huà)的另一種選擇

閱讀 2116·2019-08-26 11:22

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

由淺入深地教你開(kāi)發(fā)自己的 React Router v4

Home

About

{topicId}

Topics

Please select a topic.

相關(guān)文章

JavaScript - 收藏集 - 掘金

**前端每周清單半年盤(pán)點(diǎn)之 React 與 ReactNative 篇**

**todo-list 項(xiàng)目問(wèn)題總結(jié)（使用 react 進(jìn)行開(kāi)發(fā)）**

react-router 升級(jí)小記

ReactRouter升級(jí) v2 to v4

發(fā)表評(píng)論

0條評(píng)論

alin

男|高級(jí)講師

TA的文章

C | 指針的相關(guān)知識(shí)（二）

內(nèi)存函數(shù)實(shí)現(xiàn)和詳解

基于SSH的在線駕?？荚囅到y(tǒng)

汽車(chē)行業(yè)全渠道一站式解決方案

css

你可能知道的 javaScript 數(shù)據(jù)結(jié)構(gòu)與算法

關(guān)于前端數(shù)據(jù)&邏輯的思考

requestAnimationFrame Web中寫(xiě)動(dòng)畫(huà)的另一種選擇

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

由淺入深地教你開(kāi)發(fā)自己的 React Router v4

Home

About

{topicId}

Topics

Please select a topic.

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！