模块化react-router配置

栏目: IOS · Android · 发布时间: 5年前

内容简介:因为公司的需要最近踏进了react坑,一直在挖坑填坑,在路由这一块折腾得不行。直接进入主题,配置react-router模块化npm install react-router-dom --save

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配置》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

运营实战指南

运营实战指南

韩利 / 电子工业出版社 / 2016-9-1 / 49

《运营实战指南》架构清晰,前8章主要通过故事形式深入浅出理解运营,将运营基础知识和概念融入到故事中。第9章讲解运营核心方法论,从目标、关键驱动元素、试错调优、高效运行4部分来完整讲解一个运营项目从0到1的过程。第10章、11章、12章深入讲解了运营人拿业绩最核心的知识点:用户、内容和文案。其中数据分析、活动运营等内容以案例形式穿插在各个章节中。最后两章,主谈运营人在日常生活中如何历练以及一个运营人......一起来看看 《运营实战指南》 这本书的介绍吧!

图片转BASE64编码
图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具