模块化react-router配置方法详解

前端  /  管理员 发布于 4年前   742

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.jsimport 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.jsimport 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

最后的结果为：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• React-router v4 路由配置方法小结
• 关于react-router的几种配置方式详解