模塊化react-router配置方法詳解
react-router模塊化配置
因為公司的需要最近踏進了react坑，一直在挖坑填坑，在路由這一塊折騰得不行。
直接進入主題，配置react-router模塊化
1.先下載react-router-dom
npm install react-router-dom --save
2.在相應的文件引入react-router-dom相應的模塊
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
3.在src子創(chuàng)建一個module目錄，接著在module目錄在創(chuàng)建一個router.js文件，用來配置路由。
//router.js
import Index from '../components/Index'
import New from '../components/New'
import NewList from '../components/NewList'
import NewContent from '../components/NewContent'
const routes = [
{
path:"/",
component:Index,
exact:true
},
{
path:"/new",
component:New,
routes:[
{
path:"/new/",
component:NewContent
},
{
path:"/new/newList",
component:NewList
}
]
},
]
export default routes
4.在app.js根目錄添加相應的跳轉(zhuǎn)路徑。
//app.js
import React from 'react';
import './App.css';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import router from "./modules/routers"
function App() {
return (
<Router>
<nav className="nav">
<ul>
<li>
<Link to="/">首頁</Link>
</li>
<li>
<Link to="/new">新聞</Link>
</li>
</ul>
</nav>
{
router.map((router,index)=>{
if(router.exact){
return <Route exact key={index} path={router.path}
render = {
props =>(
<router.component {...props} routes = {router.routes}/>
)
}
/>
}else{
return <Route key={index} path={router.path}
render = {
props =>(
<router.component {...props} routes = {router.routes} />
)
}
/>
}
})
}
</Router>
);
}
export default App;
注意點：嵌套路由千萬不要在<Route/>身上加上component={xxx.xxx},否則在子路由頁碼就接受不到父路由傳遞給子路由的數(shù)據(jù)，重要的事情說三篇
注意點：嵌套路由千萬不要在<Route/>身上加上component={xxx.xxx},否則在子路由頁碼就接受不到父路由傳遞給子路由的數(shù)據(jù)，重要的事情說三篇
注意點：嵌套路由千萬不要在<Route/>身上加上component={xxx.xxx},否則在子路由頁碼就接受不到父路由傳遞給子路由的數(shù)據(jù)，重要的事情說三篇
解析一下，<Route/>里面的render,這是官方給出的一種固定寫法，為了解決父路由傳遞數(shù)據(jù)給子路由接受不到的問題。render是一個對象，里面是一個箭頭函數(shù)，箭頭函數(shù)放回<router.component {...props} routes = {router.routes} />一個標簽，router.component的router對于的是你map傳進來的那個形參，傳啥寫啥；component 是配置文件對應的component ，routes 是傳給子路由的數(shù)據(jù)、（子路由通過this.props.routes 接收）
5.在有子路由的頁碼配置跳轉(zhuǎn)
import React ,{Component} from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
class New extends Component{
render(){
return(
<div className="box">
<div className="left">
<ul>
<li>
<Link to="/new">New</Link>
</li>
<li>
<Link to="/new/newList">NewList</Link>
</li>
</ul>
</div>
<div className="right">
{
this.props.routes.map((item,index)=>{
return <Route key={index} exact path={item.path} component={item.component}></Route>
})
}
</div>
</div>
)
}
}
export default New
最后的結(jié)果為：
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
useEffect中return函數(shù)的作用和執(zhí)行時機解讀
這篇文章主要介紹了useEffect中return函數(shù)的作用和執(zhí)行時機,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01
React中g(shù)etDefaultProps的使用小結(jié)
React中的getDefaultProps功能允許開發(fā)者為類組件定義默認屬性,提高組件的靈活性和容錯性,本文介紹了getDefaultProps的作用、語法以及最佳實踐,并探討了其他替代方案,如函數(shù)組件中的默認參數(shù)、高階組件和ContextAPI等,理解這些概念有助于提升代碼的可維護性和用戶體驗2024-09-09
React項目中使用zustand狀態(tài)管理的實現(xiàn)
zustand是一個用于狀態(tài)管理的小巧而強大的庫,本文主要介紹了React項目中使用zustand狀態(tài)管理的實現(xiàn),具有一定的參考價值,感興趣的可以了解一下2023-10-10
useCallback是react中比較重要的一個hook，useCallback 用來返回一個函數(shù)，在父子組件傳參或者通用函數(shù)封裝中,起到舉足輕重的作用2022-11-11
這篇文章主要介紹了React組件通信,在開發(fā)中組件通信是React中的一個重要的知識點，本文通過實例代碼給大家講解react中常用的父子、跨組件通信的方法，需要的朋友可以參考下2023-03-03
本文主要介紹了React父子組件傳值(組件通信)的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-05-05
我們知道，在React中沒有像Vue那種數(shù)據(jù)雙向綁定的效果。而this.setState方法就是用來對數(shù)據(jù)進行更改的。而通過this.setState方法更改的數(shù)據(jù)，會讓組件的render重新渲染，并且刷新數(shù)據(jù)2022-09-09
jsx就是javsscript與xml結(jié)合的一種格式，是js語法的一種擴展，只要把html代碼寫在js中就是jsx。react中定義組件有3種寫法：函數(shù)的方式、es5的寫法、es6（類）的寫法2022-08-08
React Native中ScrollView組件輪播圖與ListView渲染列表組件用法實例分析
這篇文章主要介紹了React Native中ScrollView組件輪播圖與ListView渲染列表組件用法,結(jié)合實例形式詳細分析了ScrollView組件輪播圖與ListView渲染列表組件具體功能、使用方法與操作注意事項,需要的朋友可以參考下2020-01-01
錯誤邊界是一種React組件,這種組件可以捕獲發(fā)生在其子組件樹任何位置的JavaScript錯誤,并打印這些錯誤,同時展示降級UI,而并不會渲染那些發(fā)生崩潰的子組件樹2023-01-01