版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/cvper/article/details/87782951
在上一篇中,我们实现了项目默认进入首页,然后手动修改页面地址,显示相应的页面;
现在我们实现下面的功能,进入项目,默认显示首页,首页中有三个按钮,点击相应的按钮,跳转到相应的页面;
我们需要做的是在上一篇项目的基础上增加点处理就可以了,我们使用上一篇中的所有代码;
现在默认显示的页面是 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>
)
}
}
修改完成之后,直接测试即可,
点击简介,会显示简介的页面,其余同理;