狗屎一样的React(第八节,React-router 4.0的使用姿势)

一定有很多小伙伴比较关心前端路由router这个东西,以为之前我们一直在用项目路由,甚至每一个html就要用一个路由。而没有接触过前端路由的小伙伴又不知道该从何入手。这一小节,我们继续前面的代码,开始添加react-router。

通过在cmd小黑窗找到之的项目地址,然后 npm start 命令启动React项目。

1、

这一节我们要说的是路由,所有就涉及到页面跳转,如图:

页面顶部添加 “登录” 按钮,点击按钮跳转到登录页面去。

找到之前js/top.js添加代码

const TopLoginBtn = () =>({
render: function(){
return (
<a className="index_lobtn">登录</a>
);
}
})

然后在AppTop方法中插入T opLoginBtn:

const AppTop = () => ({
render: function(){

return (
<header>
<h1>{this.props.word}</h1>
<TopLoginBtn />
</header>
);

}
});

这样就把所谓的登录按钮加上了


2、然后就是添加路由配置

通过npm下载router组件, npm install react-router-dom ,执行结束后,如果看到node_modules文件夹下有了react-router-dom这个文件夹,证明下载成功了。

然后需要在index.js中引入

  import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';

我们之前在index.js中做了首页的一些内容,最终方法入口是:

ReactDOM.render(
  <SiteIndex/>,
  document.getElementById('root')
);

首页所有的内容我们都装进了SiteIndex方法中了,现在要做修改了,注意啊,今天是2017年6月8日,如果你看到这篇文章,基本下载的都是router V4.0的了,所以这个写法就是最正确的React-router使用姿势了。

var SiteRouter = React.createClass({
  render: function(){
    return (
        <Router>
          <div>
            <Route exact path="/" component={SiteIndex}/>
          </div>
      </Router>
    );
  }
})

自定义一个SiteRouter方法,这里面的path指向为/,意思就是首页,打开项目的欢迎页,对准的显示内容为SiteIndex。而我们的index.html显示入口也需要做修改:

ReactDOM.render(
  <SiteRouter/>,
  document.getElementById('root')
);

这个时候,如果你打开浏览器,看到了正常的显示,那么就证明路由添加成功了。


3、路由跳转

这个时候就要在 “登录” 按钮上做手脚了。找到top.js,需要对TopLoginBtn 方法做修改了。

const TopLoginBtn = () =>({
render: function(){
return (
<a className="index_lobtn"><Link to="/login">登录</Link></a>
);
}
})

注意观察Link标签,他也是路由的一部分,但页面中不会显示出来。光这一步还不够,还需要在index.js中的Router组件中添加内容:

var SiteRouter = React.createClass({
  render: function(){
    return (
        <Router>
          <div>
            <Route exact path="/" component={SiteIndex}/>
            <Route path="/login" component={Login}/>
          </div>
      </Router>
    );
  }
})

我们添加了对应的path显示路径,和应该对应的Login模块。


4、添加Login模块方法

在js目录下创建 login.js,在后续的项目中,很多模块将单独建立js文件,其实React的狗屎思想认为,项目拆分的越细越好,然后使用组装的形式来完成页面内容。

import React from 'react';
import ReactDOM from 'react-dom';
import AppTop from './top.js';
import {
  BrowserRouter as Router,
  Route,
  Link
} from 'react-router-dom';


import '../css/demo.css';


const Login = () => ({
render: function(){
return (
<div>
<AppTop word="登录"/>
<div className="toindex"><Link to="/">回首页</Link></div>
</div>
);
}
});

export default Login; 

这就是login.js模块中的内容,暂时我们先不添加登录功能的代码,因为弄来弄去还是验证,翻来覆去还是ajax请求。

在这个页面中,点击 “回首页”就可以跳转回首页了。

这就是React-router的简单使用姿势。


5、判断加载

之前我们都在说需要什么功能了,就去加载什么,但就好比顶部的这个 “登录”按钮,他是跟着顶部的AppTop这个大方法走的,我们得判断登录成功后就不显示按钮了,未登录状态的时候才实现这个按钮。这个时候需要在top.js的AppTop这个方法中做修改了。

登录状态我们就暂时不加了,把需求改一下,当判断当前是登录页面的时候,不显示 “登录”按钮。修改如下:

const AppTop = () => ({
render: function(){
var showLogin = this.props.word;
var showTag;
if(showLogin == "登录"){
showTag = "";
}else{
showTag = <TopLoginBtn />
}
return (
<header>
<h1>{this.props.word}</h1>
{showTag}
</header>
);

}
});

通过传递的props值来判断,达到了我们想要的需求。


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

经海路大白狗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值