模块化反应路由器配置方法的详细说明

反应路由器的模块化配置

因为公司的需要，最近刚踏入react坑，一直在挖填坑，一直在纠结走线。

直接进入主题，配置react-router的模块化

1.先下载react-router-dom

NPM安装反应-路由器-DOM-保存2。在相应的文件中介绍了react-router-DOM的相应模块

从“react-router-dom”导入{ BrowserRouter as Router，Route，Link }；3.在src中创建一个模块目录，然后在模块目录中创建一个router.js文件来配置路由。

//router.jsimport Index from './组件/索引“导入新内容”./components/New '从导入新列表'./components/NewList“从导入新内容”./components/new content ' const routes=[{ path : '/'，component:Index，exact:true }，{ path:'/new '，components : new，routes: [{path:'/new/'，component:new content }，{path:'/new/newlist '，components : new list }]}，]导出默认路由4。在app.js根目录中添加相应的跳转路径。

//app.jsimport从' React '反应过来；“进口”。/app . CSS '；从“react-router-dom”导入{ BrowserRouter as Router，Route，Link }；从“”导入路由器。/modules/routers ' function app(){ return(router nav class name=' nav ' ul Li Link to='/' home page/Link/Li Li Link to='/new ' news/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)；}导出默认App注意：对于嵌套路由，切勿将组件={xxx.xxx}添加到路由/中；否则，父路由发送给子路由的数据将不会在子路由的页码上被接受。有三件重要的事情要说。

注意：对于嵌套路由，切勿将组件={xxx.xxx}添加到路由/中；否则，父路由发送给子路由的数据将不会在子路由的页码上被接受。有三件重要的事情要说。

注意：对于嵌套路由，切勿将组件={xxx.xxx}添加到路由/中；否则，父路由发送给子路由的数据将不会在子路由的页码上被接受。有三件重要的事情要说。

分析官方给出的固定写法Route/中的渲染，以解决父路由无法将数据传递给子路由的问题。Render是一个对象，它包含一个箭头函数。箭头功能被放回路由器的标签中.props}路由={router。routes}/。路由器的路由器。组件引用由您的映射传入的参数，并编写您想要的任何内容。组件是与配置文件相对应的组件，路由是发送给子路由的数据(子路由通过this.props.routes接收)

5.用子路由配置页码跳转

从"反应"导入反应{组件};从“react-router-dom”导入{作为路由器、路由、链接的浏览器}；新班级扩展组件{ render(){ return(div类名='box' div类名='左' ul Li链接到='/新建'新建/链接/Li Li链接到='/新列表'新列表/链接/Li/ul/div类名='右' {这个。道具。路线。地图((项目，索引)={返回路线键={索引}精确路径={ item。路径}组件={项目。组件}/路由})}/div/div)} }导出默认值新的最后的结果为：

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