關(guān)于react-router的幾種配置方式

劉永祥發(fā)布于2019-08-20 18:16 / 3006人閱讀

摘要：本文給大家介紹的是相比于其他框架更靈活的配置方式，大家可以根據(jù)自己的項目需要選擇合適的方式。標(biāo)簽的方式下面我們看一個例子當(dāng)為時渲染我們可以看到這種路由配置方式使用標(biāo)簽，然后根據(jù)找到對應(yīng)的映射。

路由的概念

路由的作用就是將url和函數(shù)進(jìn)行映射，在單頁面應(yīng)用中路由是必不可少的部分，路由配置就是一組指令，用來告訴router如何匹配url，以及對應(yīng)的函數(shù)映射，即執(zhí)行對應(yīng)的代碼。

react-router

每一門JS框架都會有自己定制的router框架，react-router就是react開發(fā)應(yīng)用御用的路由框架，目前它的最新的官方版本為4.1.2。本文給大家介紹的是react-router相比于其他router框架更靈活的配置方式，大家可以根據(jù)自己的項目需要選擇合適的方式。

1.標(biāo)簽的方式

下面我們看一個例子：

import { IndexRoute } from "react-router"

const Dashboard = React.createClass({
  render() {
    return Welcome to the app!
  }
})

React.render((
  
    
      {/* 當(dāng) url 為/時渲染 Dashboard */}
      
      
      
        
      
    
  
), document.body)

我們可以看到這種路由配置方式使用Route標(biāo)簽，然后根據(jù)component找到對應(yīng)的映射。

這里需要注意的是IndexRoute這個有點不一樣的標(biāo)簽，這個的作用就是匹配"/"
的路徑，因為在渲染App整個組件的時候，可能它的children還沒渲染，就已經(jīng)有"/"頁面了，你可以把IndexRoute當(dāng)成首頁。

嵌套路由就直接在Route的標(biāo)簽中在加一個標(biāo)簽，就是這么簡單

2.對象配置方式

有時候我們需要在路由跳轉(zhuǎn)之前做一些操作，比如用戶如果編輯了某個頁面信息未保存，提醒它是否離開。react-router提供了兩個hook，onLeave在所有將離開的路由觸發(fā)，從最下層的子路由到最外層的父路由，onEnter在進(jìn)入路由觸發(fā)，從最外層的父路由到最下層的自路由。

讓我們看代碼：

const routeConfig = [
  { path: "/",
    component: App,
    indexRoute: { component: Dashboard },
    childRoutes: [
      { path: "about", component: About },
      { path: "inbox",
        component: Inbox,
        childRoutes: [
          { path: "/messages/:id", component: Message },
          { path: "messages/:id",
            onEnter: function (nextState, replaceState) {
              //do something
            }
          }
        ]
      }
    ]
  }
]

React.render(, document.body)

3.按需加載的路由配置

在大型應(yīng)用中，性能是一個很重要的問題，按需要加載JS是一種優(yōu)化性能的方式。在React router中不僅組件是可以異步加載的，路由也是允許異步加載的。Route 可以定義 getChildRoutes，getIndexRoute 和 getComponents 這幾個函數(shù)，他們都是異步執(zhí)行的，并且只有在需要的時候才會調(diào)用。

我們看一個例子：

const CourseRoute = {
  path: "course/:courseId",

  getChildRoutes(location, callback) {
    require.ensure([], function (require) {
      callback(null, [
        require("./routes/Announcements"),
        require("./routes/Assignments"),
        require("./routes/Grades"),
      ])
    })
  },

  getIndexRoute(location, callback) {
    require.ensure([], function (require) {
      callback(null, require("./components/Index"))
    })
  },

  getComponents(location, callback) {
    require.ensure([], function (require) {
      callback(null, require("./components/Course"))
    })
  }
}

這種方式需要配合webpack中有實現(xiàn)代碼拆分功能的工具來用，其實就是把路由拆分成小代碼塊，然后按需加載。