模块化react-router如何配置-创新互联

这篇文章主要介绍了模块化react-router如何配置，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联是专业的工布江达网站建设公司，工布江达接单;提供成都做网站、网站设计,网页设计,网站设计,建网站,PHP网站建设等专业做网站服务;采用PHP框架,可快速的进行工布江达网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,专业的做网站团队,希望更多企业前来合作!

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子创建一个module目录，接着在module目录在创建一个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根目录添加相应的跳转路径。

//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;

注意点：嵌套路由千万不要在身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据，重要的事情说三篇

注意点：嵌套路由千万不要在身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据，重要的事情说三篇

注意点：嵌套路由千万不要在身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据，重要的事情说三篇

解析一下，里面的render,这是官方给出的一种固定写法，为了解决父路由传递数据给子路由接受不到的问题。render是一个对象，里面是一个箭头函数，箭头函数放回一个标签，router.component的router对于的是你map传进来的那个形参，传啥写啥；component 是配置文件对应的component ，routes 是传给子路由的数据、（子路由通过this.props.routes 接收）

5.在有子路由的页码配置跳转

import React ,{Component} from 'react';

import { BrowserRouter as Router, Route, Link } from "react-router-dom";

class New extends Component{
  
  render(){
    
    return(
      
      
        
          

            

              New
            
            

              NewList