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

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

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

 

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

 

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

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

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