首先，我们先来说说withRouter是做什么的，它主要是使非路由直连组件可以直接获取到路由的props（history、location、match等等）
import React, { Component } from 'react';
import { withRouter } from 'react-router-dom';
import { RouteComponentProps } from 'react-router';
type routerProps = RouteComponentProps<any>;
type IProps =
& routerProps
class Index extends Component<IProps> {
public render() {
return (
<Flex className="extra-package">
</Flex>
export default withRouter(Index as any);
由于我用了typescript 所以 我使用RouteComponentProps来配合withRouter；给他的的routerProps定义类型。如果有其他父组件传来的props也可以利用& 连接在一起；
withRouter 包裹组件的时候 因为ts 所以要写成 Index as any
不过目前这种方式好像不能接入父组件传来的props参数；
于是乎，我又试了一种方法
import { RouteComponentProps } from 'react-router';
interface iprops {
test: string
interface RouterProps extends RouteComponentProps<void> {}
type IProps =
& RouterProps
& iprops
class Index extends Component<IProps> {
public componentDidMount() {
this.props.history;
完美关联路由props和父组件传入的props
首先，我们先来说说withRouter是做什么的，它主要是使非路由直连组件可以直接获取到路由的props（history、location、match等等） import React, { Component } from 'react';import { withRouter } from 'react-router-dom';import { RouteCompon...
├── dist // 编译结果目录
├── build // webpack 配置目录
│ ├── webpack.base.js // 公用配置
│ ├── webpack.dev.js // 开发时配置
│ └── product.dev.js // 打包时配置
├── mock // mock 数据
├── script // node.js 脚本
├── src // 源码目录
│ ├── assets
作用1. 使用Route包裹组件， 将react-router的history, location, match信息通过props传递给包裹的组件
默认情况下必须是经过路由匹配渲染的组件才存在this.props，才拥有路由参数，才能使用 函数跳转 的写法，执行this.props.history.push('/***')跳转到对应路由的页面。
然而不是所有组件都直接与路由相连（通过路由跳转到此组件）的，当这些组件需要路由参数时，使用withRouter就可以给此组件传入路由参数，此时就可以使用this.
withRouter的适用场景
1.避免更新受阻
因为react-redux的connect高阶组件会为传入的参数组件实现shouldComponentUpdate 这个钩子函数，
导致只有prop发生变化时才触发更新相关的生命周期函数(含render)而很显然，我们的location对象并没有作为prop传入该参数组件
// before
export default connect(mapS...
文章目录一、todoList案例相关知识点二、github搜索案例相关知识点三、路由的基本使用四、路由组件与一般组件五、NavLink与封装NavLink六、Switch的使用七、解决多级路径刷新页面样式丢失的问题八、路由的严格匹配与模糊匹配九、Redirect的使用十、嵌套路由十一、向路由组件传递参数十二、编程式路由导航十三、BrowserRouter与HashRouter的区别十四、antd的按需引入+自定主题
一、todoList案例相关知识点
1.拆分组件、实现静态组件，注意：className、
render时会把match, location和history传入props
react中经过路由渲染的组件才拥有路由参数，使用this.props.history.push('/a')跳转到对应路由的页面
使用withRouter可以将路由参数传入t...
withRouter是不通过路由跳转的组件，将history、locattion、math放在页面的props 对象中，
默认情况下，必须是经过路由匹配的组件才可以使用this.props，才会拥有路由的参数，一般首页，不是通过路由跳转过来的，而是直接从浏览器中输入地址打开的，如果不使用withRouter此组件的this.props为空，没法执行props中的history、location、match等方法
2. 应用
设置withRouter很简单只需要两步：
import React from 'react'
// import { Router, Route, IndexRoute, hashHistory, childRoutes/* , Redirect */ } from 'react-router'
import {BrowserRouter as Router, Route, S...
connected-react-router是一个专门为React和Redux开发的库，它提供了一种将React Router v4集成到Redux应用程序中的简单方法。这个库使用react-router-redux中间件，可以将当前的路由状态（location）储存到Redux的store中，并可以通过Redux来管理路由状态。因此，我们可以将路由状态作为state的一部分，来实现路由的可预测性和可调试性。
除此之外，connected-react-router还提供了一些方便的作用于, 包括：
1. routerMiddleware: Redux middleware, 可以捕获路由器事件并将其触发到Redux中，从而生成新的状态。
2. push, replace, go, goBack, goForward: 路由操作的辅助函数，可以使用这些功能来在应用程序中改变路由状态。
3. ConnectedRouter: 一个React组件，可以使您的应用程序与Redux结合使用路由器。与常规路由器相比，这个连通路由器可以使我们从状态管理中获得许多好处。
总之，connected-react-router提供了一种简便的方式来将React Router v4集成到Redux应用程序中，并给开发者提供了更加可预测和可调试的路由状态管理方式。这个库已经被广泛使用，并且有很好的社区支持。如果你正在构建Redux应用程序，并打算使用React Router的话，connected-react-router是一个绝不会让你失望的选择。
nginx启动失败之nginx: [emerg] invalid number of arguments in "root" directive in nginx/nginx.conf:45
上比 :
HBuilder X 项目运行在小程序开发者工具 失败
DWDream:
