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

最新推荐文章于 2024-12-08 10:10:18 发布

原创最新推荐文章于 2024-12-08 10:10:18 发布 · 221 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#react #路由 #页面跳转 #首页 #设置

React 专栏收录该内容

16 篇文章

订阅专栏

本文介绍如何在React项目中使用react-router-dom模块的Link组件实现首页按钮点击跳转功能。通过修改home.js文件，引入Link组件并设置三个按钮对应的路由，实现点击简介、功能、展示按钮分别跳转到相应页面。

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

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

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

现在默认显示的页面是 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>
        )
    }
}

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

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