最新消息:20210917 已从crifan.com换到crifan.org

【整理】React-Router v4的心得和注意事项和参考资料

ReactJS crifan 2587浏览 0评论

关于React-Router v4的文档,官网其实最值得参考:

react-router/packages/react-router/docs/api at master · ReactTraining/react-router

和:

React Router: Declarative Routing for React.js

其他不错的资料:

react-router2 迁移到 react-router4 关注点 · Issue #6 · gmfe/blog

解释的很清楚了。

有空自己再去整理。

1.代码中跳转页面,不能用:

 this.context.router.push(‘/urltoJump’);

或:

this.context.router.transitionTo(‘/urltoJump’);

了,而是改用:

(1)推荐:withRouter

class Login extends Component {
   this.props.history.push(‘/rse_web/main’);
}
export default withRouter(Login);

即:

用withRouter去封装包装Component后,该Component的props中就有了match,location,history这些属性了,就可以用props.history去push实现页面跳转了。

(2)不推荐:借用this.context的:

this.context.router.history.push(‘/urlToJump’);

提示:

如果想要使用this.context.router.history.push,则需要需要给Component加上contextTypes:

export default class Login extends Component {
….
    this.context.router.history.push(‘/main’);
}
Login.contextTypes = {
  router: PropTypes.object.isRequired
};

2.react-router v4中,对于加入了router中的Component,则自动(被注入了)就有了match,location,history参数了。

所以上面withRouter的方式中,可以使用:

this.props.history.push

去页面跳转。

其中history中常用的属性有:

ength -( number 类型)指的是 history 堆栈的数量。
action -( string 类型)指的是当前的动作(action),例如 PUSH,REPLACE 以及 POP 。
location -( object类型)是指当前的位置(location),location 会具有如下属性:
pathname -( string 类型)URL路径。
search -( string 类型)URL中的查询字符串(query string)。
hash -( string 类型)URL的 hash 分段。
state -( string 类型)是指 location 中的状态,例如在 push(path, state) 时,state会描述什么时候 location 被放置到堆栈中等信息。这个 state 只会出现在 browser history 和 memory history 的环境里。
push(path, [state]) -( function 类型)在 hisotry 堆栈顶加入一个新的条目。
replace(path, [state]) -( function 类型)替换在 history 堆栈中的当前条目。
go(n) -( function 类型)将 history 对战中的指针向前移动 n 。
goBack() -( function 类型)等同于 go(-1) 。
goForward() -( function 类型)等同于 go(1) 。
block(prompt) -( function 类型)阻止跳转

抽空再好好看看:

React Router v4 Unofficial Migration Guide – codeburst

react-router v4变化

React Router v4 几乎误我一生 – 知乎专栏

React-Router V4 简单实现 – 掘金

React Router v4 入坑指南 – 简书

【相关内容和参考资料】

【已解决】ReactJS中Uncaught TypeError this.context.router.push is not a function

【已解决】ReactJS中react-router v4的this.context.router.history.push无法跳转页面

reactjs – Programmatically navigate using react router V4 – Stack Overflow

reactjs – How to push to History in React Router v4? – Stack Overflow

如何在react-router-v4中通过代码跳转子路由? – 提问 – React 中文

转载请注明:在路上 » 【整理】React-Router v4的心得和注意事项和参考资料

发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
89 queries in 0.183 seconds, using 20.10MB memory