箭头函数扩展:

箭头函数:

functoin 函数名(参数){

   函数体

}

箭头函数:

1、把function删掉 ,

2、参数和{}之间加上 箭头=>

简写:

1、参数的简写:只有一个参数才能简写

2、函数体的简写:只有一条语句才能简写 exp:

var f = v => alert(1);

var show = (a,b)=> {
alert(1);
return a +b
};

特殊:json

var show = ()=>{a:12,b:5};错误

var show = ()=>({a:12,b:5});——++用括号包起来++

匿名函数的定义与执行:
定义:
(function (){
alert(1);
}); 执行:
1.
(function (){
alert(1);
})();
2.
(function (){
alert(11);
}()); 3.
!function(){
alert(1);
}();
4.
~function(){
alert(1);
}();
5.
-function(){
alert(1);
}();
6.
+function(){
alert(1);
}();

箭头函数注意事项.特性:

1、干掉了arguments 用...args解决

exp:

<script>
//箭头函数里面没有arguments function sum1(){
//argument
console.log(arguments);
}
console.log(sum1(1,2,3,4,5));
var sum2 = ()=>{
console.log(arguments);
}
console.log(sum2(1,2,3,4,5)); </script>

res:

解决方法:

解构赋值

<script>
//箭头函数里面没有arguments
var sum = (...args)=>{
console.log(args);
}
sum(1,2,3,4,5); </script>

res:

2、不能用箭头函数创建类 用class解决

res:

3、this 指向父级
<script>
function Person(){ alert(this);
}
var p1 = Person();//this:Window var p2 = new Person();//this:Object document.onclick = Person;//this:HTMLDocument
</script>

路由:

https://reacttraining.com/react-router/

https://github.com/ReactTraining/react-router

http://react-china.org/t/react-router4/15843

Vue路由:
1、安装

cnpm i -S vue-router

2、引入

import VueRouter from "vue-router"

3、注册成为vue插件

Vue.use(VueRouter);

4、创建路由对象
let router = new VueRouter({
routes:[
{path,name,componet,componets,children}
]
});
5、注入到vue实例中

new Vue({router});

6、页面上使用路由:展现、跳转

跳转:

展现:

react路由

1、安装

npm i -S react-router-dom

2、引入

imoprt ReactRouter from "react-router-dom";

3、直接使用:包含创建路由的过程


对比:

react vue
Home Home
{path:"/",name:"home",componet:Home}
exact 控制匹配到/路径时不会再继续向下匹配,
path 标识路由的路径,
component 表示路径对应显示的组件。
HashRouter和BrowserRouter 是标签(使用方式:包的内容只能有一个子节点) mode:"hash/history"
虚拟路径:basename="/basename" 虚拟路径:base:"/base"

Switch常常会用来包裹Route/Redirect,它里面不能放其他元素,用来只显示一个路由

react                                               vue

<Link to="/">Home</Link>                         <router-link to="/">Home</router-link>
<Route exact path="/" component={Home} /> {path:"/",name:"home",componet:Home}
exact 控制匹配到/路径时不会再继续向下匹配,
path 标识路由的路径,
component 表示路径对应显示的组件。 HashRouter和BrowserRouter 是标签 mode:"hash/history" ****使用方式:包的内容只能有一个子节点 虚拟路径: basename="/basename" base:"/base" Switch常常会用来包裹Route/Redirect,它里面不能放其他元素,用来只显示一个路由。

exp1:

Link,Route

import React, { Component } from 'react';
import {Route,Link,Switch,Redirect} from "react-router-dom";
//import {HashRouter as Router,Route,Link,Switch,Redirect} from "react-router-dom";
const Home = ()=> <div>首页</div>
const News = ()=> <div>新闻</div>
const Users = ()=> <div>用户</div>
class App extends Component {
render() {
return (
<div className="App">
<a href="/home">首页</a>
<a href="/news">新闻</a>
<a href="/users">用户</a>
<hr />
<Link to="/home">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/users">用户</Link>
<hr />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/news" component={News}/>
<Route path="/users" component={Users}/>
{/* <Route component={Home} />
*/}
{/*<Route path="/*" component={News}/> */}
<Redirect to="/" />
</Switch>
</div> );
}
}
export default App;

exp2:

props.location:

{
hash:"",
key:"579ijl",
pathname:"/news",
search:"?id=111",
state:undefined
}
mport React, { Component } from 'react';
import {BrowserRouter as Router,Route,Link,Switch,Redirect} from "react-router-dom";
const Home = (props)=> {
console.log("Home:",props);
return <div>首页</div>;
};
const News = (props)=> {
console.log("news:",props);
return <div>新闻</div>;
};
const Users = (props)=> {
console.log("Users:",props);
return <div>用户</div>;
};
const refCallback = node => {
// `node` refers to the mounted DOM element or null when unmounted
console.log("node",node);
return <div>用户函数</div>;
} class App extends Component {
render() {
return (<Router>
<div className="App">
<Link to="/home">首页</Link>
<Link to="/news?id=111">新闻</Link>
<Link to={{
hash:"",
pathname:"/users",
search:"?username=aaa&password=123",
state:{ fromDashboard: true },
}}>用户</Link>
<Link to="/refCallback" innerRef={refCallback} >用户函数</Link> <hr />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/news" component={News}/>
<Route path="/users" component={Users}/>
<Route path="/refCallback" component={refCallback}/>
<Redirect to="/"/>
</Switch>
</div>
</Router> );
}
}
export default App;

exp3:

const Users = ({match})=>{
console.log("Users:",match);
return <div>用户-----{match.params.id}</div>
}
class App extends Component{
render(){
return (
<div className = "App">
<Link to="/users/111">用户111</Link>
<Link to="/users/222">用户222</Link>
<Link to="/users/333">用户333</Link>
<hr/>
<Switch>
<Route path="/users/:id" component={Users}/>
</Switch> </div>
)
}
}

res:

exp4:

import React, { Component } from 'react';
import {Route,Link,NavLink,Switch,Redirect} from "react-router-dom"; const Home = ()=> <div>首页</div>
const News = ()=> <div>新闻</div>
const Users = ()=> <div>用户</div> class App extends Component {
render() {
return (
<div className="App">
<Link to="/home">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/users">用户</Link>
<hr />
<NavLink activeClassName="selected" to="/home">首页</NavLink> {/*点击添加class和属性*/}
<NavLink activeClassName="selected" to="/news">新闻</NavLink>
<NavLink to="/users" activeStyle={{
fontWeight: 'bold',
color: 'red'
}}>用户</NavLink> <hr />
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/news" component={News}/>
<Route path="/users" component={Users}/>
<Redirect to="/"/>
</Switch>
</div> );
}
}
export default App;

res:

路由传参:

1、?         

2、params     

  props.match.params.xxx

  props.match.path  -->"/users/:id" ----> route

  props.match.url   -->"/users/111" ----> link

exp5:

import React, { Component } from 'react';
import { Route,NavLink,Switch,Redirect} from "react-router-dom";
import "./index.css"; const Home = () =><div>首页</div>
const News = () =><div>新闻</div>
const Users = ({match}) =>{
console.log(111,match)
return (<div>
<NavLink to={`${match.url}/111`} >用户111</NavLink>
<NavLink to={`${match.url}/222`} >用户222</NavLink>
<NavLink to={`${match.url}/333`} >用户333</NavLink> <Route path={`${match.url}/:id`} component={USerDetail}/>
</div>)
}
const USerDetail = ({match}) =>{
return (
<div>
<NavLink to={`${match.url}/info`}>用户信息</NavLink>
<NavLink to={`${match.url}/pass`}>用户密码</NavLink>
<Route path={`${match.path}/info`} component={UserInfo} />
<Route path={`${match.path}/pass`} component={UserPass} />
</div>
)
}
const UserInfo = ({match}) => {
return (
<div>
UserInfo --- {match.url}
</div>
);
}
const UserPass = ({match}) => {
return (
<div>
UserPass --- {match.url}
</div>
);
}
class App extends Component{
render(){
return (
<div className = "App">
<NavLink to="/home">首页</NavLink>
<NavLink to="/news">新闻</NavLink>
<NavLink to="/users">用户</NavLink>
<hr/> <Switch>
<Route exact path="/" component={Home}/>
<Route path="/home" component={Home}/>
<Route path="/news" component={News}/>
<Route path="/users" component={Users}/>
<Redirect to = "/" />
</Switch> </div>
)
}
} export default App;

res:

获取数据: 都是从组件的属性上去获取 props
props:组成{history,location,match}
history: {go,goBack,goForward} 做跳转用
location:{hash,pathname,search,stat}
match:{params,path,url}

exp6:

import React, { Component } from 'react';
import { BrowserRouter as Router,Route,Link,Switch,withRouter} from "react-router-dom"; function Home(){
return <div>首页</div>
}
function News(){
return <div>新闻</div>
}
function Users(){
return <div>用户</div>
} class App extends Component { back(){
//window.history.back();
//window.history.go(-1);
console.log(this.props);
this.props.history.go(-1);
}
forward(){
//window.history.forward();
//window.history.go(1);
this.props.history.go(1);
}
push(){
// window.location = "/"
this.props.history.push("/");
} render() {
return ( <Router>
<div className="App">
<input onClick={()=> this.back()} type="button" value="back" />
<input onClick={()=> this.forward()} type="button" value="forward" />
<input onClick={()=> this.push()} type="button" value="回到首页" />
<hr />
<Link to="/home">首页</Link>
<Link to="/news">新闻</Link>
<Link to="/users">用户</Link> <hr />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/home" component={Home} />
<Route path="/news" component={News} />
<Route path="/users" component={Users} />
<Route path="/*" component={News} />
</Switch> </div>
</Router>
);
}
}
export default withRouter(App);

res:

withRouter: 功能 为组件添加路由信息{history,location,match}---> this.props

运行条件: 必须在 Router下面 不能在Router外面!


** exact Switch


https://reacttraining.com/react-router/core/api/Router

1.

什么叫 hash 地址,hash 地址就是指 # 号后面的 url。

假如有一个 Link 标签,点击后跳转到 /abc/def。

BrowserRouter: http://localhost:8080/abc/def

HashRouter: http://localhost:8080/#/abc/def

如果有服务器端的动态支持,建议使用 BrowserRouter,否则建议使用 HashRouter。

原因在于,如果是单纯的静态文件,假如路径从 / 切换到 /a 后,此时刷新页面,页面将无法正常访问。

2.

将“URL”的历史记录保存在内存中(不读取或写入地址栏)的<路由器>。在测试和非浏览器环境(如React Native)中很有用

3.

一个从不改变位置的。

当用户实际上没有点击时,这在服务器端渲染场景中很有用,因此该位置从未实际改变。因此,名称:static。当您只需插入一个位置并在渲染输出上作出断言时,它也可用于简单的测试。

以下是一个示例节点服务器,为发送302状态代码,并为其他请求发送常规HTML

4.

一个<Router和Android应用程序的> 。

import { NativeRouter } from 'react-router-native'

<NativeRouter>
<App/>
</NativeRouter>

23.react-router 路由的更多相关文章

  1. < react router>: (路由)

    < react router> (路由): 思维导图: Atrial   文件夹下的index.js 文件内容: import React, { Component } from 'rea ...

  2. React初识整理(四)--React Router(路由)

    官网:https://reacttraining.com/react-router 后端路由:主要做路径和方法的匹配,从而从后台获取相应的数据 前端路由:用于路径和组件的匹配,从而实现组件的切换. 如 ...

  3. react router路由传参

    今天,我们要讨论的是react router中Link传值的三种表现形式.分别为通过通配符传参.query传参和state传参. ps:进入正题前,先说明一下,以下的所有内容都是在react-rout ...

  4. 【react router路由】<Router> <Siwtch> <Route>标签

    博客 https://www.jianshu.com/p/ed5e56994f13?from=timeline 文档 http://react-guide.github.io/react-router ...

  5. react ---- Router路由的使用和页面跳转

    React-Router的中文文档可以参照如下链接: http://react-guide.github.io/react-router-cn/docs/Introduction.html 首先,我们 ...

  6. React Router路由传参方式总结

    首先我们要知道一个前提,路由传递的参数我们可以通过props里面的属性来获取.只要组件是被<Router>组件的<component>定义和指派的,这个组件自然就有了props ...

  7. react router 4.0以上的路由应用

    thead>tr>th{padding:8px;line-height:1.4285714;border-top:1px solid #ddd}.table>thead>tr& ...

  8. react router @4 和 vue路由 详解(七)react路由守卫

    完整版:https://www.cnblogs.com/yangyangxxb/p/10066650.html 12.react路由守卫? a.在之前的版本中,React Router 也提供了类似的 ...

  9. react router @4 和 vue路由 详解(全)

    react router @4 和 vue路由 本文大纲: 1.vue路由基础和使用 2.react-router @4用法 3.什么是包容性路由?什么是排他性路由? 4.react路由有两个重要的属 ...

  10. React Router 4.0 实现路由守卫

    在使用 Vue 或者 Angular 的时候,框架提供了路由守卫功能,用来在进入某个路有前进行一些校验工作,如果校验失败,就跳转到 404 或者登陆页面,比如 Vue 中的 beforeEnter 函 ...

随机推荐

  1. svn文件夹解锁批处理

    清除svn文件的bat脚本整理 从svn上检出的项目,不在myeclipse工具中脱离svn的管辖,怎么办呢,下面有我的方法,也是借鉴别人的,用了特别好使,故推荐给大家. 首先创建一个xxx.bat文 ...

  2. Eclipse中Project的属性Deployment Assembly(部署程序集)消失了,不存在了,去哪儿了

    1. 该项目不是web项目,所以不存在Deployment Assembly 属性.在Eclipse中,怎样将一个非web project变成一个web project? 1)右键项目,选择Proje ...

  3. SSE图像算法优化系列二十三: 基于value-and-criterion structure 系列滤波器(如Kuwahara,MLV,MCV滤波器)的优化。

    基于value-and-criterion structure方式的实现的滤波器在原理上其实比较简单,感觉下面论文中得一段话已经描述的比较清晰了,直接贴英文吧,感觉翻译过来反而失去了原始的韵味了. T ...

  4. CSS单行格式化与压缩

    工具简介:CSS单行格式化与压缩工具

  5. TensorFlow精选Github开源项目

    转载于:http://www.matools.com/blog/1801988 TensorFlow源码 https://github.com/tensorflow/tensorflow 基于Tens ...

  6. apache中如何调用CGI脚本

    参考: http://www.jdon.com/idea/cgi.htm http://www.jb51.net/article/49069.htm 在Apache在配置对CGI的支持 LoadMod ...

  7. [k8s]k8s内容索引

    我会陆陆续续小结下. dns相关 dns策略 1.集群内 2.指定内网 subdomain 3.访问互联网 resovel.conf kube-dns架构图解及策略 nginx-ingress: DN ...

  8. 【计算机网络】OSI七层模型图解

    1.物理层 建立.维护.断开物理连接.(由底层网络定义协议) 2.数据链路层 建立逻辑连接.进行硬件地址寻址.差错校验等功能.(由底层网络定义协议) 将比特组合成字节进而组合成帧,用MAC地址访问介质 ...

  9. python之字符串操作方法

    定义及特性: 以引号(单引号,双引号,三引号)包围且不能修改 a= ' \t aBcdE fgFijDlmNopq rSt uTwxy z 123 !@# \t ' 一.判断字符串,返回bool值:F ...

  10. Oracle 傻瓜式数据归档

    推荐用方法二 方法一 [本库备份,分区表需要另写CREATE TABLE方法] ----------------------------------------------- ; ; ; ; RENA ...