这篇文章主要介绍了模块化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> <nav className="nav"> <ul> <li> <Link to="/">首页</Link> </li> <li> <Link to="/new">新闻</Link> </li> </ul> </nav> { router.map((router,index)=>{ if(router.exact){ return <Route exact key={index} path={router.path} render = { props =>( <router.component {...props} routes = {router.routes}/> ) } /> }else{ return <Route key={index} path={router.path} render = { props =>( <router.component {...props} routes = {router.routes} /> ) } /> } }) } </Router> ); } export default App;
注意点:嵌套路由千万不要在<Route/>身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据,重要的事情说三篇
注意点:嵌套路由千万不要在<Route/>身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据,重要的事情说三篇
注意点:嵌套路由千万不要在<Route/>身上加上component={xxx.xxx},否则在子路由页码就接受不到父路由传递给子路由的数据,重要的事情说三篇
解析一下,<Route/>里面的render,这是官方给出的一种固定写法,为了解决父路由传递数据给子路由接受不到的问题。render是一个对象,里面是一个箭头函数,箭头函数放回<router.component {...props} routes = {router.routes} />一个标签,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( <div className="box"> <div className="left"> <ul> <li> <Link to="/new">New</Link> </li> <li> <Link to="/new/newList">NewList</Link> </li> </ul> </div> <div className="right"> { this.props.routes.map((item,index)=>{ return <Route key={index} exact path={item.path} component={item.component}></Route> }) } </div> </div> ) } } export default New
最后的结果为:
感谢你能够认真阅读完这篇文章,希望小编分享的“模块化react-router如何配置”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
网页名称:模块化react-router如何配置
标题链接:https://www.cdcxhl.com/article12/jpsigc.html
成都网站建设公司_创新互联,为您提供网页设计公司、网站收录、网站导航、品牌网站制作、外贸建站、Google
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联