react-8 react-router-dom 的简单使用（3）

小灰灰 2022-03-18 08:28 130阅读 0赞

在上一篇中，我们实现了项目默认进入首页，然后手动修改页面地址，显示相应的页面；

现在我们实现下面的功能，进入项目，默认显示首页，首页中有三个按钮，点击相应的按钮，跳转到相应的页面；

我们需要做的是在上一篇项目的基础上增加点处理就可以了，我们使用上一篇中的所有代码；

现在默认显示的页面是 home，我们打开home.js 文件：

import React from 'react';
    import './home.css'
    
    
    export default class Home extends React.Component {
        render(){
            return(
                <div>我是首页文件</div>
            )
        }
    }

我们修改上面的代码如下：

引入react-router-dom 模块的 Link 组件，然后设置三个按钮点击跳转的路由

import React from 'react';
    import './home.css'
    import {Link} from 'react-router-dom';
    
    
    export default class Home extends React.Component {
        render(){
            return(
                <div className="home">
                    <Link to="/Intro"><div className="home-block">简介</div></Link>
                    <Link to="/Func"><div className="home-block">功能</div></Link>
                    <Link to="/Show"><div className="home-block">展示</div></Link>
                </div>
            )
        }
    }

修改完成之后，直接测试即可，

点击简介，会显示简介的页面，其余同理；

发表评论取消回复

表情：

评论列表（有 0 条评论，130人围观）

还没有评论，来说两句吧...

相关阅读

相关 react--学习笔记8（react脚手架和简单练习）

react应用(基于react脚手架)： 1.使用create-react-app创建react应用 react脚手架 1. xxx脚手架: 用来帮助程序员快速创

小灰灰/ 2022年11月27日 07:20/ 0 赞/ 174 阅读

相关 react-6 react-router-dom 的简单使用（1）

之前我们了解了react-router-dom是路由的组件，下面看看这个路由的组件的使用；我们之前使用create-react-app 创建了简单的项目目录：my-app-

曾经终败给现在/ 2022年04月23日 11:50/ 0 赞/ 141 阅读

相关 React - Context的简单使用

Context 通过组件树提供了一个传递数据的方法，从而避免了在每一个层级手动的传递 props 属性。在一个典型的 React 应用中，数据是通过 props 属性由上向

朴灿烈づ我的快乐病毒、/ 2022年04月15日 05:07/ 0 赞/ 171 阅读

相关 React - React-Router的简单介绍

Router中文意思是路由，以前多见于后端，现如今前端也有自己的路由。为什么要使用路由？ 1：单页页面实现页面的切换 2：可以通过URL对页面进行定位 3：语义化组织

港控/mmm°/ 2022年04月14日 02:49/ 0 赞/ 161 阅读

相关 React -- redux-thunk的简单使用

为什么要使用redux-thunk, 因为我们想把像ajax请求的异步操作不放在声明周期函函数里面, 便于管理。使用redux-thunk中间件，我们可以在action构造

心已赠人/ 2022年04月13日 12:13/ 0 赞/ 250 阅读

相关 react-4 简单的组件的使用

之前我们基于 create-react-app 创建出下面目录结构的项目： ![20190215114853784.png][] 我们也简单了解了react 是如何

女爷i/ 2022年03月19日 05:24/ 0 赞/ 135 阅读

相关 react-8 react-router-dom 的简单使用（3）

在上一篇中，我们实现了项目默认进入首页，然后手动修改页面地址，显示相应的页面；现在我们实现下面的功能，进入项目，默认显示首页，首页中有三个按钮，点击相应的按钮，跳转到相应的

小灰灰/ 2022年03月18日 08:28/ 0 赞/ 131 阅读

相关 react-7 react-router-dom 的简单使用（2）

之前，我们尝试了类似 tab选项卡功能的路由学习；现在我们来看下基本的各个页面间的路由的实现；下面实现一个基础的四个页面的项目的路由的处理：我们默认进入首页

朴灿烈づ我的快乐病毒、/ 2022年03月18日 05:27/ 0 赞/ 139 阅读

相关 create-react-app 搭建有ReactRouterDom 和 Mobx 项目

create-react-app 搭建有ReactRouterDom 和 Mobx 项目 1. 下载 create-react-app npm i crea

分手后的思念是犯贱/ 2022年03月14日 18:28/ 0 赞/ 225 阅读

相关 React-Native 数据存储之react-native-storage的简单使用

`react-native-storage`是封装好的数据存储组件，安装方法见：[https://github.com/sunnylqm/react-native-storag

布满荆棘的人生/ 2022年03月06日 16:12/ 0 赞/ 521 阅读