這篇文章主要介紹了模塊化react-router如何配置，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司服務(wù)項目包括大祥網(wǎng)站建設(shè)、大祥網(wǎng)站制作、大祥網(wǎng)頁制作以及大祥網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，大祥網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到大祥省份的部分城市，未來相信會繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

react-router模塊化配置

因為公司的需要最近踏進(jìn)了react坑，一直在挖坑填坑，在路由這一塊折騰得不行。

直接進(jìn)入主題，配置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;

注意點(diǎn)：嵌套路由千萬不要在<Route/>身上加上component={xxx.xxx},否則在子路由頁碼就接受不到父路由傳遞給子路由的數(shù)據(jù)，重要的事情說三篇

注意點(diǎn)：嵌套路由千萬不要在<Route/>身上加上component={xxx.xxx},否則在子路由頁碼就接受不到父路由傳遞給子路由的數(shù)據(jù)，重要的事情說三篇

注意點(diǎn)：嵌套路由千萬不要在<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傳進(jìn)來的那個形參，傳啥寫啥；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é)果為：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“模塊化react-router如何配置”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!

網(wǎng)頁名稱：模塊化react-router如何配置
標(biāo)題鏈接：http://chinadenli.net/article12/jpsigc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設(shè)計公司、網(wǎng)站收錄、網(wǎng)站導(dǎo)航、品牌網(wǎng)站制作、外貿(mào)建站、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)