react中嵌入网页_React Router 嵌套路由

嵌套路由简单理解：就是在子页面中再设置一层新的路由导航规则。

初始化基本目录根据草图分析，可以指导有两层关系，第一层是大类，第二层是子类别。先再/src目录下建立一个Pages的文件夹。然后在/Pages目录下再建立两个目录/video和/workPlace,然后在/src目录下建立一个AppRouter.js文件作为首页和路由的配置文件。目录结构如下所示:

初始化基本目录

- src

|--Pages|--video

|--workPlace|--index.js

|--AppRouter.js

AppRouter.js ：

import React from "react";import { BrowserRouter as Router, Route, Link }from "react-router-dom";import Index from './Pages/Index'import './index.css'function AppRouter(){

return (

一级导航

• 博客首页
• 视频教程
• 职场技能

);

}

export default AppRouter;

然后修改一下/src/index.js文件，需要引入AppRouter，并进行Render渲染。

import React from 'react'

import ReactDOM from 'react-dom'

import AppRouter from './AppRouter'

ReactDOM.render(, document.getElementById('root'));这时候就可以在终端里输入npm start让程序跑起来，然后去浏览器中进行查看了。

在/src目录下，新建一个index.css文件，然后编写下面的样式。

//添加基本样式

body{

padding: 0px;

margin: 0px;

}.mainDiv{

display: flex;

width: 100%;

}.leftNav{

width: 16%;

background-color: #c0c0c0;

color:#333;

font-size:24px;

height: 1000px;

padding: 20px;

}.rightMain{

width: 84%;

height:1000px;