模块化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 Hook useState useEffect componentD
这篇文章主要介绍了React Hook useState useEffect componentDidMount componentDidUpdate componentWillUnmount问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
react-native 封装视频播放器react-native-video的使用
本文主要介绍了react-native 封装视频播放器react-native-video的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-01-01
React动画实现方案Framer Motion让页面自己动起来
这篇文章主要为大家介绍了React动画实现方案Framer Motion让页面自己动起来，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-10-10
这篇文章主要介绍了从react hooks闭包陷阱切入浅谈react hooks，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验，构建世界一流的原生APP。接下来通过本文给大家分享React Native项目框架搭建的一些心得体会，感兴趣的朋友跟随小编一起看看吧2021-05-05
这篇文章主要为大家详细介绍了React实现全选功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-08-08
React TypeScript 应用中便捷使用Redux Toolkit方法详解
这篇文章主要为大家介绍了React TypeScript 应用中便捷使用Redux Toolkit方法详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要为大家介绍了react源码中的生命周期和事件系统实例解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
这篇文章主要为大家介绍了React错误用法习惯分析详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
详解React项目的服务端渲染改造(koa2+webpack3.11)
本篇文章主要介绍了详解React项目的服务端渲染改造(koa2+webpack3.11)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-03-03
最新评论