模塊化react-router配置方法詳解
react-router模塊化配置
因為公司的需要最近踏進了react坑,一直在挖坑填坑,在路由這一塊折騰得不行。
直接進入主題,配置react-router模塊化
1.先下載react-router-dom
npm install react-router-dom --save
2.在相應(yīng)的文件引入react-router-dom相應(yīng)的模塊
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根目錄添加相應(yīng)的跳轉(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} />一個標(biāo)簽,router.component的router對于的是你map傳進來的那個形參,傳啥寫啥;component 是配置文件對應(yīng)的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)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
React Hook useState useEffect componentD
這篇文章主要介紹了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03react-native 封裝視頻播放器react-native-video的使用
本文主要介紹了react-native 封裝視頻播放器react-native-video的使用,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-01-01React動畫實現(xiàn)方案Framer Motion讓頁面自己動起來
這篇文章主要為大家介紹了React動畫實現(xiàn)方案Framer Motion讓頁面自己動起來,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-10-10React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解
這篇文章主要為大家介紹了React?TypeScript?應(yīng)用中便捷使用Redux?Toolkit方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-11-11詳解React項目的服務(wù)端渲染改造(koa2+webpack3.11)
本篇文章主要介紹了詳解React項目的服務(wù)端渲染改造(koa2+webpack3.11),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-03-03