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)


相关推荐

  • wptx64能卸载吗_HLK学习笔记讲述.docx

    wptx64能卸载吗_HLK学习笔记讲述.docxHLK学习笔记讲述HLK学习笔记1、HLK概念和工作环境WindowsHLK是一个用于测试Windows10技术预览版的硬件设备的测试框架。有资格获得Windows徽标,产品必须经过测试使用Windows的HLK。1.1、HLK测试环境WindowsHLK包含两个组件:一个测试服务器和一或多个测试系统。HLK测试服务器通常称为控制器,测试服务器包好两个部分:WindowsHLKContr…

  • executorservice和executor_source counter

    executorservice和executor_source counter1、创建一个WorkerThread类,表示执行任务publicclassWorkerThreadimplementsRunnable{ @Override publicvoidrun(){ System.out.println("当前时间:"+System.currentTimeMillis()+"线程名称:" +Thread.currentT…

  • Python3中打开文件的方式(With open)「建议收藏」

    Python3中打开文件的方式(With open)「建议收藏」python文件读写文件是最常见的IO操作。Python内置了读写文件的函数,用法和C是兼容的。读写文件前,我们先必须了解一下,在磁盘上读写文件的功能都是由操作系统提供的,现代操作系统不允许普通的程序直接操作磁盘。读写文件就是请求操作系统打开一个文件对象(通常称为文件描述符),然后,通过操作系统提供的接口从这个文件对象中读取数据(读文件),或者把数据写入这个文件对象(写文件…

  • selenium.webdriver_python electron

    selenium.webdriver_python electronhttp://blog.csdn.net/huilan_same/article/details/52789954今天谈谈文件下载吧,很多人不会处理弹出的文件下载框,其实跟上传类似,可以用autoit和win32api解决,方法类似,可以看博主之前的文章 Pythonselenium——文件上传所有方法整理总结 ,今天这里博主主要想讲讲更漂亮的一种处理办法,那就是指定

  • HTML5实现IP Camera网页输出

    HTML5实现IP Camera网页输出

  • 黑马程序员c++课件_黑马java课程大纲

    黑马程序员c++课件_黑马java课程大纲前言:**配套视频:https://www.bilibili.com/video/BV1et411b73Z?from=search&seid=16795623907667609637只是为方便学习,不做其他用途,在此发布C++基础入门部分配套讲义,原作者为黑马程序C++核心编程本阶段主要针对C++面向对象编程技术做详细讲解,探讨C++中的核心和精髓。1内存分区模型C++程序在执行时,将内存大方向划分为4个区域代码区:存放函数体的二进制代码,由操作系统进行管理的全局区:存放全局

发表回复

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

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