react路由嵌套

react路由嵌套在config.js中添加配置项importTwofrom”../pages/Home/Two”importRecommendfrom”../pages/Recommend/Recemmend”;//导入组件letrouters=[{path:”/home”,//路由地址component:Home,//路由模板routes:[//路由嵌套配置路由嵌套不能使用精准匹配

大家好,又见面了,我是你们的朋友全栈君。

在config.js 中添加配置项

import Two from "../pages/Home/Two"
import Recommend from "../pages/Recommend/Recemmend";  //导入组件

let routers = [
    {
        path: "/home",   //路由地址
        component: Home,    //路由模板   
        routes: [    //路由嵌套  配置路由嵌套不能使用精准匹配
            {
                path: "/home/recommend",
                component: Recommend,
                exact: true,   //精准匹配
            },
            {
                path: "/home/ranking",
                component: System,
                exact: true,
            },
            {
                path: "/home/two",
                component: Two,
                exact: true,
            },
        ]
    },
    {
        path: "/about",
        component: About,
        exact: true
    },
    {
        path: "/",
        redirect: "/home",   //重定向
    }
]

export default routers;

将配置文件导入到路由组件 index.js


import React, { Component } from 'react';
import { Switch, Route, Redirect } from "react-router-dom";  
import routers from "./config";  //配置文件

class Router extends Component {
    render() {
        return (
            <Switch>
                {routers.map((value, index) => {  //映射注入Route组件中
                    if (!value.redirect) {   //需要重定型执行写下面代码
                        return (
                            <Route key={index} exact={value.exact} path={value.path} component={props => <value.component {...props} routes={value.routes} />} ></Route>
                            //如果有路由嵌套,则将路由签到传递到组件的props中,在传递的组件中再次进行路由配置
                        
                        )
                    } else {
                        return (
                            <Redirect key={index} from={value.path} to={value.redirect}></Redirect>
                            //重定向
                        )
                    }
                })}
            </Switch>
        );
    }
}

export default Router; 将文件导注入到app.js中

app.js

import './App.css';
import React, { Component } from 'react';
import RouterView from './router/index';
class App extends Component {
  render() {
    return (
      <div>
      //将组件使用在app.js中
        <RouterView></RouterView>
      </div>
    );
  }
}

export default App;

在路由嵌套的Home页面中再次配置路由组件;


 render() {
console.log(this.props.routes)   //路由嵌套的配置规则
        return (
            <div className="Home-box">
                <Switch>
                //再次添加路由组件实现路由嵌套
                    {this.props.routes.map((value, index) => <Route key={index} path={value.path} exact={value.exact} component={value.component}></Route>)}
                </Switch>
            </div>
        );
    }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/131483.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 手把手教你使用YOLOV5训练自己的目标检测模型-口罩检测-视频教程

    手把手教你使用YOLOV5训练自己的目标检测模型大家好,这里是肆十二(dejahu),好几个月没有更新了,这两天看了一下关注量,突然多了1k多个朋友关注,想必都是大作业系列教程来的小伙伴。既然有这么多朋友关注这个大作业系列,并且也差不多到了毕设开题和大作业提交的时间了,那我直接就是一波更新。这期的内容相对于上期的果蔬分类和垃圾识别无论是在内容还是新意上我们都进行了船新的升级,我们这次要使用YOLOV5来训练一个口罩检测模型,比较契合当下的疫情,并且目标检测涉及到的知识点也比较多,这次的内容除了可以作为大家

  • MySql数据库备份与恢复——使用mysqldump 导入与导出方法总结[通俗易懂]

    MySql数据库备份与恢复——使用mysqldump 导入与导出方法总结[通俗易懂]MySql数据库备份与恢复——使用mysqldump导入与导出方法总结mysqldump客户端可用来转储数据库或搜集数据库进行备份或将数据转移到另一个sql服务器(不一定是一个mysql服务器)。转储包含创建表和/或装载表的sql语句。ps、如果在服务器上进行备份,并且表均为myisam表,应考虑使用mysqlhotcopy,因为可以更快地进行备份和恢复。本文从三部分介绍了mys…

  • Linux 日志分析工具之awstats详解「建议收藏」

    Linux 日志分析工具之awstats详解「建议收藏」原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://freeloda.blog.51cto.com/2033581

  • Excel与XML相互转换 – C# 简单实现方案[通俗易懂]

    Excel与XML相互转换 – C# 简单实现方案[通俗易懂]Excel与XML相互转换-C#简单实现方案在日常工作中,我需要将数据存储在Excel中进行数据分析和处理,然后再将数据转换为XML格式进行跨平台的数据交换。网上搜索Excel转换为XML的实现方式大都是将Excel读取到数据库的DataSet,然后再写入到xml,代码比较繁琐而且要求运行环境安装数据库。最终我找到了一个简单的Excel与XML相互转换的C#实现方案,运行环境无需安装数据

  • IDEA创建springboot + mybatis项目全过程「建议收藏」

    IDEA创建springboot + mybatis项目全过程「建议收藏」鉴于隔很久再在IDEA新建springboot项目时,会出现对步骤不确定的情况,因此,写下这篇博客记录创建一个可运行的springboot+mybatis项目的全过程。步骤如下:1.打开IDEA2.File==>new==>project,如图:3.选择springInitializr==>右边的ProjectSDK我选的是我已经安…

  • 正则表达式 查找_正则表达式不能输入0

    正则表达式 查找_正则表达式不能输入0根据指定条件查找字符串。

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号