react路由系列02___ 二级路由

最新推荐文章于 2025-06-26 18:14:40 发布

田江

最新推荐文章于 2025-06-26 18:14:40 发布

阅读量992

点赞数 1

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/jiang7701037/article/details/95400261

react 专栏收录该内容

16 篇文章

订阅专栏

本文基于之前react路由系列文章，展开二级路由学习。通过修改GoodsList.js文件，在pages文件夹创建Pencil.js和Eraser.js组件，最后运行npm start，点击相关选项完成二级路由实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、经过文章“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 (
				<BrowserRouter>
					<div>欢迎来到商品列表页面</div><br/>
					<NavLink to='/gla/Pencil' >铅笔</NavLink> &nbsp;|&nbsp;
					<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

看到如下：