模块化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子创建一个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
                        
                    
                
                

                    {
                        this.props.routes.map((item,index)=>{
                            
                            return 
                            
                        })
                    }
                
            
            
        )
        
    }
    
}

export default New

最后的结果为：