模块化react-router如何配置

这篇文章主要介绍了模块化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如何配置”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!