react路由系列02___ 二级路由

一、经过文章“react路由系列01___ 在react脚手架里使用React-router(简单入门)”的学习，进入二级路由的学习

 

二、二级路由：

1、在react路由系列01___ 在react脚手架里使用React-router(简单入门)里的 GoodsList.js文件进行修改（这是核心，这里面写着二级路由），变成如下代码：

import React, { Component } from 'react';
import { BrowserRouter, Route,NavLink} from 'react-router-dom';
import Pencil from './Pencil';
import Eraser from './Eraser';

class GoodsList extends Component{
	render(){
		return (
				
					
欢迎来到商品列表页面

					铅笔  | 
					橡皮
					

					
					
				
			)
	}
}
export default GoodsList;

2、在pages文件夹里创建文件 Pencil.js（这不是重点，有内容就行，就是一个组件而已）

如下代码：

import React,{Component} from 'react';
class Pencil extends Component{
	render(){
		return (
				

					商品编号：01001

					商品名称：铅笔

					商品描述：铅笔好，铅笔好，铅笔写错还可以擦掉

				
			)
	}
}
export default Pencil;

3、在pages文件夹里创建文件 Eraser.js（这不是重点，有内容就行，就是一个组件而已）

如下代码：

import React, { Component } from 'react';
class Eraser extends Component{
	render(){
		return (
				

					商品编号：01002

					商品名称：橡皮

					商品描述：橡皮好，橡皮好，橡皮可以擦掉铅笔写

				
			)
	}
}
export default Eraser;

4、npm start

看到如下：

点击“商品列表”

点击“铅笔”

点击“橡皮”

Ok，大功告成