这篇文章主要介绍了模块化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(
{
this.props.routes.map((item,index)=>{
return
})
}