react props.history

React组件中经常会用到this.props.history.push来进行页面的跳转，关于props.history，在项目里使用过程中有遇到一些相关的问题和知识，在这里记录一下。
下面为history的属性：

 

history.push经常会用来进行页面的跳转，当然前提是在路由中有写url对应的界面组件，比如在登录页面中要跳转到主界面，首先在路由中规定响应的组件：

 

 在登录组件中使用history进行跳转：

 

 但和state一样，要使用this的方法必须要先绑定this才可以。

另外，除了push还可以通过Link组件直接进行页面跳转，将Button放进Link中就可以实现点击Button进行页面跳转的效果，比如点击跳转到注册界面：

 

 

 

history.location.pathname

下面为history.location的属性：

 

 

pathname是我们push到history中的最新的字符串，当我们跳转到登录界面后pathname指的就是“/login”。
之所以拿出这个来说是因为对于许多功能页面来说，因为我们使用dashboard将它们作为子界面在一个主界面框架中进行切换，它们的url均以“/”开始，因此index中会先识别“/”进入Admin，现在要实现：

• 如果我们直接进入“/”会自动跳转到“/tasksquare”。
• 如果我们进入其他以“/”开头的子界面就不会发生跳转，渲染出相应的子界面。

就可以通过pathname进行判断了：

 

 

 

 

 当不满足if时就会继续执行渲染出相应的子页面。

history.goBack

回退函数，可以返回之前push过的页面，

当没有参数时默认返回到上一个界面，goback（-2）则是指返回到上上个界面，以此类推。

但值得注意的是，这里的回退指的是“重新生成”，会像刷新页面一样重新执行React.Component的生命周期函数