React Typescript音乐播放器项目笔记：5、除Link外控制路由跳转：withRouter & typescript

项目地址：https://github.com/BUPTlhuanyu/react-music-lhy

withRouter在typescript下的使用

利用react-router4官方提供的的withRouter进行路由跳转，在项目引入：

import {  Route, withRouter } from 'react-router'

然后利用withRouter包裹组件：

class SingerBase extends Component<singerProps, singerState>｛
	...
｝
const Singer = withRouter(SingerBase as any);

export default Singer

接口singerProps中应该加上接口属性history，类型这里设置为any，更严格的，通过查找react-router对应的声明文件d.ts（node_module/@types/react-router/inde.d.ts文件）中可以找到history对应的类型如下：

export interface RouterProps {
  history: H.History;
}

因此接口singerProps可定义为：

interface singerProps{
    history: any
}

或者：

import {RouterProps} from "react-router"
interface singerProps{
    history: RouterProps["history"]
}

控制路由跳转

在SingerBase组件中的方法控制路由跳转：

class SingerBase extends Component<singerProps, singerState>｛
	...

	selectSinger = (singer:SingerClass) => {
   		this.props.history.push(`/somepath`);
	}

	render(){
		return (...)
	}
｝

其他方法

1、利用react-router中的

2、利用this.context.router.history.push(’/somepath’)