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

創(chuàng)新互聯(lián)是專業(yè)的工布江達(dá)網(wǎng)站建設(shè)公司，工布江達(dá)接單;提供成都做網(wǎng)站、網(wǎng)站設(shè)計(jì),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行工布江達(dá)網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

react-router模塊化配置

因?yàn)楣镜男枰罱みM(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)建一個(gè)module目錄，接著在module目錄在創(chuàng)建一個(gè)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.map((router,index)=>{
          
            if(router.exact){
              
              return (
                    
                  )
                }
              />
              
            }else{
              
              return (
                    
                  )
                }
              />
              
            }
          
        })
      }
    
 );
}

export default App;

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

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

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

解析一下，里面的render,這是官方給出的一種固定寫法，為了解決父路由傳遞數(shù)據(jù)給子路由接受不到的問題。render是一個(gè)對(duì)象，里面是一個(gè)箭頭函數(shù)，箭頭函數(shù)放回一個(gè)標(biāo)簽，router.component的router對(duì)于的是你map傳進(jìn)來的那個(gè)形參，傳啥寫啥；component 是配置文件對(duì)應(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(
      
      
        
          

            

              New
            
            

              NewList