路由数据
- history
- location
- match
复制const { history, location, match } = this.props;
history
history有以下属性和方法:
- length - (number) 路由栈的个数
- action - (string) 当前action (PUSH, REPLACE, or POP)
- location - (object) 当前地址
- push(path, [state]) - (function) 追加一个入口到路由栈
- replace(path, [state]) - (function) 替换路由栈的当前入口
- go(n) - (function) 跳转到路由栈第n个入口
- goBack() - (function) 相当于go(-1)
- goForward() - (function) 相当于go(1)
- block(prompt) - (function) 阻止跳转
复制this.props.history.push('/cart');
this.props.history.push('/student/zhuxiaoming/age'); // this.props.match.params = { name: 'zhuxiaoming', age: 18 } (path="/student/:name/:age" )
this.props.history.push('/student/?name=zhuxiaoming&age=18'); // qs.parse(this.props.location.search.slice(1)) { name: 'zhuxiaoming', age: 18 }
this.props.history.push({pathname: '/student', query: {name: 'zhuxiaoming', age: 18}});
this.props.history.push({pathname: '/student', state: { name:'zhuxiaoming',age:18 }}); // this.props.location.state = { name: 'zhuxiaoming', age: 18 }
location
location有以下属性:
- pathname - (string) URL的path
- search - (string) URL的query
- hash - (string) URL的hash
- state - (object) 只适用于 browser and memory history.
match
match和URL的对应关系,match有以下属性:
- params - (object) URL解析得的params
- isExact - (boolean) 是否精确匹配(全匹配)
- path - (string) 路径.
- url - (string) URL.