在没有 Mixins 的 React Router 中进行编程导航
React Router 可以在上下文中实现无缝导航，但理解其用法可能会令人困惑。让我们探索如何在不使用 mixins 的情况下以编程方式导航。
React Router 通过上下文提供历史对象，提供对推送和替换方法的访问以进行操作。然而，随着 React 的进步，您有多种编程导航选项：
1。利用 withRouter HOC（不支持 React Router 6）：
withRouter HOC 将历史对象注入到组件 props 中，从而可以直接访问导航方法。
import { withRouter } from 'react-router-dom';
const Button = withRouter(({ history }) => {
const handleClick = () => { history.push('/new-location'); };
return <button onClick={handleClick}>Click Me!</button>;
});2.渲染无路径路由（不支持 React Router 6）：
渲染没有路径的 Route 组件，它将始终匹配当前位置并传递历史属性。
import { Route } from 'react-router-dom';
const Button = () => {
return (
<Route render={({ history }) => {
const handleClick = () => { history.push('/new-location'); };
return <button onClick={handleClick}>Click Me!</button>;
}} />
);
};3。使用上下文（复杂且已弃用）：
此方法需要深入了解 React 的上下文，应谨慎使用。您需要定义一个组件上下文类型来访问历史记录属性。
import React from 'react';
const Button = (props, context) => {
const handleClick = () => { context.history.push('/new-location'); };
return <button onClick={handleClick}>Click Me!</button>;
};
Button.contextTypes = {
history: React.PropTypes.shape({
push: React.PropTypes.func.isRequired
})
};对于大多数场景，选项 1 和 2 很简单，建议使用。
以上是如何在没有 Mixins 的情况下以编程方式在 React Router 中导航？的详细内容。更多信息请关注PHP中文网其他相关文章！
