React-Router的嵌套路由

这个章节我们来讲解一下嵌套路由的具体实现

1：AppRouter.js中先定义好我们要访问的一级路由

//首页
import Index from './page/Index.js';
import Video from './page/Video.js';
import Work from './page/Work.js';

function AppRouter(){
	return(
		

		
			

				
博客首页
				
视频教程
				
博客首页
			
			

				
				
				
			
		
		
	)
}

2：具体的二级导航菜单和路由，我们再Video.js中定义和实现

import React,{Component} from 'react';
import {BrowserRouter as Router,Route,Link,Redirect} from 'react-router-dom';

import Vue from './video/Vue.js';
import Reacts from './video/Reacts.js';
import Node from './video/Node.js';

class Video  extends Component{
	render(){
		var style={"marginTop":"30px"};
		return(
			

			
必须要学习的教程
	
			
				

					
vue教程
					
react教程
					
node教程
				
				

					
					
					
				
			
			
		)
	}
}

export default Video;

ps:其实就是在二级组件Video.js中，分别引入具体页面3级组件和定义好路由就可以啦

好啦，基本完成，我们最后一步优化
假设请求后台，java人员给的接口，我们模拟定义，改造一下

//后台给的路由
const  javaRouter=[
	{path:'/',title:'博客首页',exact:true,component:Index},
	{path:'/video',title:'视频教程',exact:false,component:Video},
	{path:'/work',title:'博客首页',exact:false,component:Work}
]
function AppRouter(){
	return(
		

		
			

				{
					javaRouter.map((item,index)=>{
						return 
{item.title}
					})
				}
			
			

				{
					javaRouter.map((item,index)=>{
						return 
					})
				}
				
			
		
		
	)
}

效果图

加油~~~~~~~