快捷導(dǎo)航

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

更新時(shí)間：2017年07月24日 14:57:20 作者：echoLC

本篇文章主要介紹了關(guān)于react-router的幾種配置方式詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧

本文介紹關(guān)于react-router的幾種配置方式詳解，分享給大家，具體如下：

路由的概念

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

react-router

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

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

下面我們看一個(gè)例子：

import { IndexRoute } from 'react-router'

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

React.render((
 <Router>
  <Route path="/" component={App}>
   {/* 當(dāng) url 為/時(shí)渲染 Dashboard */}
   <IndexRoute component={Dashboard} />
   <Route path="about" component={About} />
   <Route path="inbox" component={Inbox}>
    <Route path="messages/:id" component={Message} />
   </Route>
  </Route>
 </Router>
), document.body)

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

這里需要注意的是IndexRoute這個(gè)有點(diǎn)不一樣的標(biāo)簽，這個(gè)的作用就是匹配'/'的路徑，因?yàn)樵阡秩続pp整個(gè)組件的時(shí)候，可能它的children還沒(méi)渲染，就已經(jīng)有'/'頁(yè)面了，你可以把IndexRoute當(dāng)成首頁(yè)。
嵌套路由就直接在Route的標(biāo)簽中在加一個(gè)標(biāo)簽，就是這么簡(jiǎn)單

2.對(duì)象配置方式

有時(shí)候我們需要在路由跳轉(zhuǎn)之前做一些操作，比如用戶如果編輯了某個(gè)頁(yè)面信息未保存，提醒它是否離開(kāi)。react-router提供了兩個(gè)hook，onLeave在所有將離開(kāi)的路由觸發(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(<Router routes={routeConfig} />, document.body)

3.按需加載的路由配置

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

我們看一個(gè)例子：

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中有實(shí)現(xiàn)代碼拆分功能的工具來(lái)用，其實(shí)就是把路由拆分成小代碼塊，然后按需加載。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: