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 (<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

看到如下：

点击“商品列表”

点击“铅笔”

点击“橡皮”

Ok，大功告成

react路由系列02___ 二级路由相关推荐

Vue 路由配置和二级路由配置
Vue 路由配置和二级路由配置路由配置二级路由默认首个页面二级路由导致一级路由下的高亮失效路由配置我们初始化我们的Vue项目后,打开工程目录src/router下的index.js.我们可 ...
vue2路由手动创建二级路由路由传参路由守卫打包上线
路由手动配置: #在@vue/cli创建的项目中,路由用法如下. 1.安装路由npm install vue-router@32:定义路由所需的组件(.vue文件)要实现页面about 和home两个 ...
vue 二级路由嵌套和二级路由高亮问题
第一层路由我写在app.vue里面.如图所示: footer.vue: 二级路由是这样: index.js里面的配置: 效果图: 效果出来了,又出现新的问题,就是点击二级路由的时候,默认的二级路由高亮 ...
vue-router 路由创建、路由嵌套、二级路由
文章目录前言说明一.路由起步二.使用步骤 1.创建项目 2.安装路由 3.创建文件 1.Test.vue文件 2.index.js文件 3.App.vue文件三.运行项目 1.在项目文件下打 ...
[华为路由系列-2] 等价路由介绍和配置
等价静态路由所谓等价路由就是路由器通过路由选举规则比较不出优劣的路由,等价路由的路由优先级必须一样. (使用场景:当网络设备有多条去往目标网段的路径,并且这些路径的带宽一致或者带宽差异不大时,可以使 ...
4.2 路由系列：软路由物理机安装openwrt 小白教程（esir高大全）
选择软路由和openwrt的原因在这里就不再阐述了,相信既然搜到这篇文章的你心中已经有了答案.这里说一下为什么选择esir的高大全版本,在这个版本里几乎集合了你想要的所有功能,基本无需再额外下载配置, ...
react二级路由的两种方法
** react 二级路由配置 ** 1.使用react - router - config包 ①创建一个config.js文件默认导出路由数组 import Home from '../views/ ...
react二级路由配置正确不显示页面的问题解决
react二级路由配置正确不显示页面的问题解决最近在写react项目,配置二级路由时出了一个小小的bug,虽然是一个小小的bug,但是也苦思大半天不得其解.直到第二天豁然开朗,才发觉就这?? 问题描 ...
vue 二级路由以及重定向
重定向重定向通过routes 配置来完成栗子: import Vue from 'vue' import Router from 'vue-router' import Film from '@/ ...

react路由系列02___ 二级路由

react路由系列02___ 二级路由相关推荐

最新文章

热门文章