react路由系列02___ 二级路由

墨蓝 2021-12-11 03:49 430阅读 0赞

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

二、二级路由：

1、在[react路由系列01\_\_\_ 在react脚手架里使用React-router(简单入门)][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 (
    				<BrowserRouter>
    					<div>欢迎来到商品列表页面</div><br/>
    					<NavLink to='/gla/Pencil' >铅笔</NavLink>  | 
    					<NavLink to='/gla/Eraser' >橡皮</NavLink>
    					<hr/>
    					<Route path='/gla/Pencil' component={Pencil} />
    					<Route path='/gla/Eraser' component={Eraser} />
    				</BrowserRouter>
    			)
    	}
    }
    export default GoodsList;

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

如下代码：

import React,{Component} from 'react';
    class Pencil extends Component{
    	render(){
    		return (
    				<div>
    					商品编号：01001<br/>
    					商品名称：铅笔<br/>
    					商品描述：铅笔好，铅笔好，铅笔写错还可以擦掉<br/>
    				</div>
    			)
    	}
    }
    export default Pencil;

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

如下代码：

import React, { Component } from 'react';
    class Eraser extends Component{
    	render(){
    		return (
    				<div>
    					商品编号：01002<br/>
    					商品名称：橡皮<br/>
    					商品描述：橡皮好，橡皮好，橡皮可以擦掉铅笔写<br/>
    				</div>
    			)
    	}
    }
    export default Eraser;

4、npm start

看到如下：

![20190711000931228.png][]

点击“商品列表”

![20190711000948218.png][]

点击“铅笔”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70][]

点击“橡皮”

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1][]

Ok，大功告成

[react_01_ _react_React-router]: https://blog.csdn.net/jiang7701037/article/details/95222851
[20190711000931228.png]: /images/20211211/e42168d553434e1d97d3ab5357d27595.png
[20190711000948218.png]: /images/20211211/758da598cd4c4d9bbb2f4b7014fe9355.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70]: /images/20211211/09435d11fc964fd28b47aa76df593b14.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ppYW5nNzcwMTAzNw_size_16_color_FFFFFF_t_70 1]: /images/20211211/11aec5183a994339b1064e2ed91568e7.png