資訊專欄INFORMATION COLUMN
摘要：本文給大家介紹的是相比于其他框架更靈活的配置方式，大家可以根據自己的項目需要選擇合適的方式。標簽的方式下面我們看一個例子當為時渲染我們可以看到這種路由配置方式使用標簽，然后根據找到對應的映射。
路由的概念
路由的作用就是將url和函數進行映射，在單頁面應用中路由是必不可少的部分，路由配置就是一組指令，用來告訴router如何匹配url，以及對應的函數映射，即執行對應的代碼。
react-router每一門JS框架都會有自己定制的router框架，react-router就是react開發應用御用的路由框架，目前它的最新的官方版本為4.1.2。本文給大家介紹的是react-router相比于其他router框架更靈活的配置方式，大家可以根據自己的項目需要選擇合適的方式。
1.標簽的方式下面我們看一個例子：
import { IndexRoute } from "react-router"
const Dashboard = React.createClass({
render() {
return Welcome to the app!
}
})
React.render((
{/* 當 url 為/時渲染 Dashboard */}
), document.body)
我們可以看到這種路由配置方式使用Route標簽，然后根據component找到對應的映射。
這里需要注意的是IndexRoute這個有點不一樣的標簽，這個的作用就是匹配"/"
的路徑，因為在渲染App整個組件的時候，可能它的children還沒渲染，就已經有"/"頁面了，你可以把IndexRoute當成首頁。
嵌套路由就直接在Route的標簽中在加一個標簽，就是這么簡單
2.對象配置方式有時候我們需要在路由跳轉之前做一些操作，比如用戶如果編輯了某個頁面信息未保存，提醒它是否離開。react-router提供了兩個hook，onLeave在所有將離開的路由觸發，從最下層的子路由到最外層的父路由，onEnter在進入路由觸發，從最外層的父路由到最下層的自路由。
讓我們看代碼：
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(
3.按需加載的路由配置
在大型應用中，性能是一個很重要的問題，按需要加載JS是一種優化性能的方式。在React router中不僅組件是可以異步加載的，路由也是允許異步加載的。Route 可以定義 getChildRoutes，getIndexRoute 和 getComponents 這幾個函數，他們都是異步執行的，并且只有在需要的時候才會調用。
我們看一個例子：
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中有實現代碼拆分功能的工具來用，其實就是把路由拆分成小代碼塊，然后按需加載。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84270.html
摘要：都會造成錯誤，注意一定一定嚴格的用，所以我建議直接復制我的。因為用的話他會轉義代碼，寫不寫其實一個樣。不可避免的，構建肯定是要用到的。這個時候一般用的是在外面保存然后里面調用第二個坑更隱蔽。 目標人群 獻給熟悉基礎的React語法的剛接觸React的同學~ 如果你已經寫過半年以上的React那也不用看了，畢竟我水平并不高 Whats React React 是一個不存在的網絡公司Fac...
摘要：但是使用標記將告訴瀏覽器處理路由就像服務器端路由一樣。組件需要一個稱為的屬性指向要渲染的客戶端路由。發生這種情況的原因是響應路由器將渲染與路徑匹配的所有內容除非另有指定。屬性預計將是一個函數將在對象連同和路由配置時調用。 本文轉載自：眾成翻譯譯者：iOSDevLog鏈接：http://www.zcfy.cc/article/3815原文：https://www.fullstackrea...
摘要：如何實現前端路由要實現前端路由，需要解決兩個核心如何改變卻不引起頁面刷新如何檢測變化了下面分別使用和兩種實現方式回答上面的兩個核心問題。 原文鏈接：github.com/whinc/blog/… 在單頁應用如此流行的今天，曾經令人驚嘆的前端路由已經成為各大框架的基礎標配，每個框架都提供了強大的路由功能，導致路由實現變的復雜。想要搞懂路由內部實現還是有些困難的，但是如果只想了解路由實現基本...
摘要：最近兩三周在主要在寫，在這里寫一下，算是個總結。但是打算換成，它是推薦用或，就這樣決定把之前的換成了。這里面主要的問題是作用域?？傊膊]有那么難。目前看來確實是非常適合于前后端分離的。 最近兩三周在主要在寫 React，在這里寫一下，算是個總結。 webpack 我們的后端語言用的是 Go, 對于寫網站來說，Go 并沒有好的前端資源（js, css，image）的管理方式(打包，壓縮...
摘要：官方文檔中文文檔基本使用注意一定要在根目錄的中聲明，要不然點擊任何鏈接都無法跳轉。官方文檔中文文檔簡單的來說，每一次的修改狀態都需要觸發，然而其實項目中我現在還沒用到修改數據。。。 學習 React 的過程中實現了一個個人主頁，沒有復雜的實現和操作，適合入門 ~ 原文地址：https://github.com/axuebin/react-blog/issues/17 這個項目其實功能...
閱讀 1328·2021-11-15 11:37
閱讀 2212·2021-09-23 11:21
閱讀 1299·2019-08-30 15:55
閱讀 2105·2019-08-30 15:55
閱讀 2814·2019-08-30 15:52
閱讀 2818·2019-08-30 11:12
閱讀 1572·2019-08-29 18:45
閱讀 1885·2019-08-29 14:04
