阿里Ice中组件跳转的几种方式
阿里的飞冰(ice)是对React的封装实现,提供了便捷的React开发模式和最佳实践。在最近对Ice的学习和使用过程中需要使用到组件间和页面之间的跳转功能。目前Ice中可以使用如下几种不同的方式来实现组件或页面之间的跳转功能。
- 使用<Link />标签进行组件跳转。
- 使用withRouter在组件内方法中实现页面跳转。
- 使用history API在单独方法内实现页面跳转。
- 使用hashHistory进行页面跳转。
Link实现组件跳转
引入Link组件:
import {Link} from "react-router-dom";
Link标签实现组件的跳转(不带参数):
{/* 直接跳转到route.js中该path匹配的组件 */}
<Link to="/courses" />
使用Link实现带参数的组件跳转:
import { Link } from 'react-router-dom';
class Demo extends React.Component {
render() {
return (
<div>
{/* 跳转到组件 */}
<Link to="/courses?sort=name" />
{/* 可以携带额外的数据 `state` 到路由中。 */}
<Link
to={{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { key: value },
}}
/>
</div>
)
}
}
在使用第二个link跳转组件时,可以在state中设置需要传递的参数{key: value},然后在跳转的目标组件中使用如下的方式进行获取传递的参数:
componentDidMount(){
// console.log(this.props.location)//传递过来的所有参数
console.log(this.props.location.state.key) // 输出为val
}
或者使用
link标签的具体使用可以参考:https://reacttraining.com/react-router/web/api/Link
withRouter实现页面跳转并传参
如果调用方法的地方在 React 组件内部,可以直接在组件上添加 withRouter
的装饰器,然后在需要实现跳转的页面中进行如下的设置,来实现带参数的跳转。
例如下面从OriginPage跳转到DestinationPage,并携带param参数的页面跳转设置如下:
import React from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
@withRouter
class OriginPage extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
handleHistoryPush = () => {
const { history } = this.props;
history.push({
pathname: '/destinationPage', // 待跳转的页面URL
state: { param }, // 跳转时传入的参数
});
};
render() {
const { location } = this.props;
return (
<div>
<div>当前路径: {location.pathname}</div>
<button onClick={this.handleHistoryPush}>点击跳转新页面</button>
</div>
);
}
}
在跳转后的DestinationPage页面中也需要下面相同的设置:
import React from 'react';
import { withRouter } from 'react-router-dom';
import PropTypes from 'prop-types';
@withRouter
class DestinationPage extends React.Component {
static propTypes = {
match: PropTypes.object.isRequired,
location: PropTypes.object.isRequired,
history: PropTypes.object.isRequired,
};
componentDidMount() {
let id = this.props.location.state.param;
console.log("param: " + param);
}
...
}
在目标页面使用如下的方式来获取页面跳转时传入的参数:
// 获取页面跳转传递的所有参数
let params = this.props.location;
// 获取页面跳转时,放在state中名为param的参数
let param = this.props.locatioin.state.param;
history API
如果不满足第一种方法的使用条件,比如单独抽离的某个方法中,则需要单独使用 history 的三方包。(不常见的使用情况)
添加history的依赖:
$ npm install --save history
使用history API:
import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default function checkAuth() {
ajax('/api/checkAuth').then((res) => {
if (res.data.noAuth) {
history.push('/page/noAuth');
}
});
};
使用hashHistory
引入依赖:
import {hashHistory} from ‘react-router’;
点击跳转方法进行页面跳转并携带参数:
handleClick = (user) => {
hashHistory.push({
pathname: '/user/detail',
query: {
id: user.id,
username: user.userName,
sex: user.sex
},
})
}
在跳转后的页面取出参数时使用:
let id = this.props.location.query.id;
let username = this.props.location.query.username;
let sex = this.props.location.query.sex;