關(guān)于react-router的幾種配置方式詳解
本文介紹關(guān)于react-router的幾種配置方式詳解,分享給大家,具體如下:
路由的概念
路由的作用就是將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ù)自己的項(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找到對應(yīng)的映射。
- 這里需要注意的是IndexRoute這個(gè)有點(diǎn)不一樣的標(biāo)簽,這個(gè)的作用就是匹配'/'的路徑,因?yàn)樵阡秩続pp整個(gè)組件的時(shí)候,可能它的children還沒渲染,就已經(jīng)有'/'頁面了,你可以把IndexRoute當(dāng)成首頁。
- 嵌套路由就直接在Route的標(biāo)簽中在加一個(gè)標(biāo)簽,就是這么簡單
2.對象配置方式
有時(shí)候我們需要在路由跳轉(zhuǎn)之前做一些操作,比如用戶如果編輯了某個(gè)頁面信息未保存,提醒它是否離開。react-router提供了兩個(gè)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(<Router routes={routeConfig} />, document.body)
3.按需加載的路由配置
在大型應(yīng)用中,性能是一個(gè)很重要的問題,按需要加載JS是一種優(yōu)化性能的方式。在React router中不僅組件是可以異步加載的,路由也是允許異步加載的。Route 可以定義 getChildRoutes,getIndexRoute 和 getComponents 這幾個(gè)函數(shù),他們都是異步執(zhí)行的,并且只有在需要的時(shí)候才會調(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)代碼拆分功能的工具來用,其實(shí)就是把路由拆分成小代碼塊,然后按需加載。
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程詳細(xì)講解
最近在寫 React Native 項(xiàng)目,調(diào)試應(yīng)用時(shí)發(fā)現(xiàn)頂部狀態(tài)欄和底部全面屏手勢指示條區(qū)域不是透明的,看起來很難受。研究了一下這個(gè)問題,現(xiàn)在總結(jié)一下解決方案,這篇文章主要介紹了React Native全面屏狀態(tài)欄和底部導(dǎo)航欄適配教程2023-01-01React鉤子函數(shù)之useDeferredValue的基本使用示例詳解
useDeferredValue是React 18中非常有用的一個(gè)鉤子函數(shù),它可以幫助我們優(yōu)化渲染性能,并讓UI更加流暢,如果你還沒有嘗試過它,不妨在你的下一個(gè)React項(xiàng)目中試一試,這篇文章主要介紹了React鉤子函數(shù)之useDeferredValue的基本使用,需要的朋友可以參考下2023-08-08react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼
這篇文章主要介紹了react+ant design實(shí)現(xiàn)Table的增、刪、改的示例代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12React報(bào)錯(cuò)解決之ref返回undefined或null
最近使用react做個(gè)滾動監(jiān)聽獲取更多數(shù)據(jù)效果,當(dāng)想獲取dom時(shí)發(fā)現(xiàn)怎么也獲取不到,下面這篇文章主要給大家介紹了關(guān)于React報(bào)錯(cuò)解決之ref返回undefined或null的相關(guān)資料,需要的朋友可以參考下2022-08-08React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程實(shí)例分析
這篇文章主要介紹了React基礎(chǔ)-JSX的本質(zhì)-虛擬DOM的創(chuàng)建過程,結(jié)合具體實(shí)例形式分析了虛擬dom的基本原理與實(shí)現(xiàn)方法,需要的朋友可以參考下2023-05-05React使用Canvas繪制大數(shù)據(jù)表格的實(shí)例代碼
之前一直想用Canvas做表格渲染的,最近發(fā)現(xiàn)了一個(gè)很不錯(cuò)的Canvas繪圖框架Leafer,api很友好就試著寫了一下,文中有詳細(xì)的代碼示例供大家參考,感興趣的小伙伴可以自己動手試試2023-09-09