我刚刚将react路由器从v3更换为v4。
但是我不知道如何以编程方式在组件的成员函数中导航。
i、 e在handleClick（）函数中，我想在处理一些数据后导航到/path/some/where。
我过去常常这样做：
从“react router”导入{browserHistory}
browserHistory.push（“/path/some/where”）
但是我在v4中找不到这样的接口。
如何使用v4导航
如果您针对的是浏览器环境，则需要使用react-router-dom包，而不是react-router。他们采用了与React相同的方法，以分离核心（React）和平台特定的代码（React dom，React native），细微的区别是不需要安装两个单独的包，因此环境包包含您需要的所有内容。您可以将其添加到项目中，如下所示：
纱线添加反应器dom
或
npm i react路由器dom
您需要做的第一件事是提供一个<；浏览器路由器>作为应用程序中最顶层的父组件<；浏览器路由器>使用HTML5历史API并为您管理它，因此您不必担心自己实例化它并将其传递给<；浏览器路由器>组件作为道具（在以前的版本中需要这样做）
在V4中，要以编程方式进行导航，您需要访问历史对象，该对象可通过Reactcontext访问，只要您有<；浏览器路由器>提供程序组件作为应用程序中最顶层的父组件。库通过上下文公开路由器对象，该对象本身包含历史属性。历史记录界面提供了多种导航方法，例如推送、替换和返回。您可以在此处查看整个属性和方法列表
对Redux/Mobx用户的重要提示
如果您在应用程序中使用redux或mobx作为状态管理库，您可能会遇到组件问题，这些组件应该是位置感知的，但在触发URL更新后不会重新呈现。
这是因为react router使用上下文模型将location传递给组件
connect和observer都创建了组件，其shouldComponentUpdate方法对当前的道具和下一个道具进行了粗略的比较。只有在至少一个道具发生更改时，这些组件才会重新渲染。这意味着，为了确保它们在位置改变时更新，需要为它们提供一个在位置改变时改变的道具
解决这一问题的两种方法是：
- 将连接的组件包装在无路径的
中<；路线/>。当前的位置对象是<；路线>传递到它渲染的组件 - 用
withRouter高阶组件包装您的已连接的组件，该组件实际上具有相同的效果，并作为道具注入位置
撇开这一点不谈，按推荐顺序，有四种编程导航方式：
1.-使用<；路线>组件
它促进了声明式风格。v4之前，<；路线/>组件被放置在组件层次结构的顶部，必须事先考虑路由结构。但是，现在您可以使用<；路线>组件树中的任意位置，允许您根据URL对有条件渲染进行更精细的控制路由将匹配、位置和历史作为道具注入组件。导航方法（如push，replace，goBack…）作为历史对象的属性提供
使用路径渲染某物有三种方法，即使用组件、渲染或子级道具，但在同一路径中不要使用多个。选择取决于用例，但基本上前两个选项仅在路径与url位置匹配时才会呈现组件，而对于子项，无论路径是否与位置匹配，都会呈现组件（用于根据url匹配调整UI）
如果要自定义组件渲染输出，则需要将组件封装在函数中，并使用渲染选项，以便向组件传递除匹配、位置和历史之外所需的任何其他道具。举例说明：
从'react Router dom'导入{BrowserRouter as Router}
const button导航=（{title，history}）=>；(
<；按钮
type=“按钮”
onClick={（）=>；history.push（'/mynewlocation'）}
&燃气轮机；
{title}
<；/button>；
);
常量SomeComponent=（）=>；(
<；Route path=“/”render={（props）=>；<；button导航{…props}title=“导航别处”/>；}/>；
)
常量应用=（）=>；(
<；路由器>；
<；SomeComponent/>；//注意在v4中，我们可以将任何其他组件交错
<；另一个组件/>；
<；/Router>；
);
2.-使用路由器的
这个高阶组件将注入与Route相同的道具。但是，它有一个限制，即每个文件只能有一个HoC
从“react router dom”导入{withRouter}
常量按钮导航=（{history}）=>；(
<；按钮
type=“按钮”
onClick={（）=>；history.push（'/mynewlocation'）}
&燃气轮机；
导航
<；/button>；
);
ButtonToNavigate.propTypes={
历史记录：React.PropTypes.shape({
推送：需要React.PropTypes.func，
}),
};
使用路由器导出默认值（按钮导航）；
3.-使用重定向组件呈现<；重定向>将导航到新位置。但是请记住，默认情况下，当前位置会被新位置替换，就像服务器端重定向（HTTP 3xx）一样。新位置由toprop提供，可以是字符串（要重定向到的URL）或location对象。如果您想将一个新条目推送到历史记录中，请同时传递一个pushprop并将其设置为true
<；重定向至=“/your new location”推送/>；
4.-不鼓励通过上下文手动访问路由器，
因为上下文仍然是一个实验性的API，并且在将来的React版本中可能会中断/更改
常量按钮导航=（道具、上下文）=>；(
<；按钮
type=“按钮”
onClick={（）=>；context.router.history.push（“/mynewlocation”）}
&燃气轮机；
导航到新位置
<；/button>；
);
ButtonToNavigate.contextTypes={
路由器：React.PropTypes.shape({
历史记录：React.PropTypes.object.isRequired，
}),
};
不用说，还有其他路由器组件是为非浏览器生态系统设计的，例如<；NativeRouter>复制内存中的导航堆栈，并以React-Native平台为目标，可通过React-router-Native软件包获得
如需进一步参考，请查看官方文件。还有一段视频是由该库的一位合著者制作的，该视频对react router v4进行了非常酷的介绍，重点介绍了一些主要的更改
toprop提供，可以是字符串（要重定向到的URL）或location对象。如果您想将一个新条目推送到历史记录中，请同时传递一个pushprop并将其设置为true
<；重定向至=“/your new location”推送/>；
4.-不鼓励通过上下文手动访问路由器，
因为上下文仍然是一个实验性的API，并且在将来的React版本中可能会中断/更改
常量按钮导航=（道具、上下文）=>；(
<；按钮
type=“按钮”
onClick={（）=>；context.router.history.push（“/mynewlocation”）}
&燃气轮机；
导航到新位置
<；/button>；
);
ButtonToNavigate.contextTypes={
路由器：React.PropTypes.shape({
历史记录：React.PropTypes.object.isRequired，
}),
};
不用说，还有其他路由器组件是为非浏览器生态系统设计的，例如<；NativeRouter>复制内存中的导航堆栈，并以React-Native平台为目标，可通过React-router-Native软件包获得
如需进一步参考，请查看官方文件。还有一段视频是由该库的一位合著者制作的，该视频对react router v4进行了非常酷的介绍，重点介绍了一些主要的更改