如何在React-Router v4中使用this.props.history.push('/page')
传递参数?
.then(response => {
var r = this;
if (response.status >= 200 && response.status < 300) {
r.props.history.push('/template');
});
答案 0 :(得分:226)
首先,您不需要执行var r = this;
,因为if statement
中的这个引用了回调本身的上下文,因为您使用箭头函数是指React组件上下文。
历史对象通常具有以下属性和方法:
- length - (number)历史堆栈中的条目数
- action - (字符串)当前操作(PUSH,REPLACE或POP)
location - (object)当前位置。可能具有以下属性:
- pathname - (字符串)URL的路径
- search - (字符串)URL查询字符串
- hash - (字符串)URL哈希片段
- state - (字符串)提供给例如的位置特定状态推送(路径,状态)此位置被推到 堆。仅适用于浏览器和内存历史记录。
- push(path,[state]) - (function)将新条目推送到历史堆栈
- replace(path,[state]) - (function)替换历史堆栈中的当前条目
- go(n) - (function)通过n个条目
移动历史堆栈中的指针- goBack() - (function)相当于go(-1)
- goForward() - (function)相当于go(1)
- 阻止(提示) - (功能)阻止导航
因此,在导航时,您可以将道具传递给历史对象,如
this.props.history.push({
pathname: '/template',
search: '?query=abc',
state: { detail: response.data }
})
或类似地适用于Link
组件或Redirect
组件
<Link to={{
pathname: '/template',
search: '?query=abc',
state: { detail: response.data }
}}> My Link </Link>
然后在使用/template
路由呈现的组件中,您可以访问传递的道具,如
this.props.location.state.detail
另请注意,在使用道具中的历史记录或位置对象时,您需要使用withRouter
连接该组件。
<强> withRouter 强>
您可以访问历史对象的属性和最近的属性
<Route>'s
通过withRouter
高阶组件进行匹配。withRouter
每当路线改变时,它将重新渲染其组件 与<Route>
渲染props: { match, location, history }
相同的道具。
答案 1 :(得分:73)
扩展解决方案(由Shubham Khatri建议)以与React钩子一起使用(从16.8开始):
package.json (always worth updating to latest packages)
{
...
"react": "^16.12.0",
"react-router-dom": "^5.1.2",
...
}
通过历史记录推送传递参数:
import { useHistory } from "react-router-dom";
const FirstPage = props => {
let history = useHistory();
const someEventHandler = event => {
history.push({
pathname: '/secondpage',
search: '?query=abc',
state: { detail: 'some_value' }
});
};
};
export default FirstPage;
使用“ react-router-dom”中的useLocation使用传递的参数:
import { useEffect } from "react";
import { useLocation } from "react-router-dom";
const SecondPage = props => {
const location = useLocation();
useEffect(() => {
console.log(location.pathname); // result: '/secondpage'
console.log(location.search); // result: '?query=abc'
console.log(location.state.detail); // result: 'some_value'
}, [location]);
};
答案 2 :(得分:46)
对于早期版本版本:
history.push('/path', yourData);
并按照以下方式获取相关组件中的数据:
this.props.location.state // it is equal to yourData
对于较新版本上述方法效果很好,但是有一种新方法:
history.push({
pathname: '/path',
customNameData: yourData,
});
并按照以下方式获取相关组件中的数据:
this.props.location.customNameData // it is equal to yourData
提示:早期版本中使用了state
键名,对于较新版本,您可以使用自定义名称来传递数据,而使用state
名称则不能必不可少的。
答案 3 :(得分:11)
history.push({pathname:"/yourroute",state: {_id: "0001", name: "AZ"}})
import React from 'react';
const YourRoute = props=> {
const { _id, name } = (props.location && props.location.state) || {};
//_id and name will contain the passed data
.
.
.
}
Here 是一个工作示例
答案 4 :(得分:7)
使用钩子对TypeScript进行反应
来自班级
this.history.push({
pathname: "/unauthorized",
state: { message: "Hello" },
});
未经授权的功能组件
interface IState {
message?: string;
}
export default function UnAuthorized() {
const location = useLocation();
const message = (location.state as IState).message;
return (
<div className="jumbotron">
<h6>{message}</h6>
</div>
);
}
答案 5 :(得分:4)
您可以使用 location
将状态发送到其他组件,就像这样
在您的源组件
this.props.history.push(pathComponent, sendState);
pathComponent
是将接收状态的目标组件
在您的目标组件 如果您使用类组件,您可以收到这样的状态
constructor(props) {
this.state = this.props.location.state
}
constructor(props: {}) {
const receiveState = this.props.location.state as StateType // you must parse into your state interface or type
this.state = receiveState
}
如果要重置接收状态。使用 history
替换位置,像这样
this.props.history({pathName: currentPath, state: resetState})
currentPath
是目标组件路径
resetState
是您想要的新值状态
答案 6 :(得分:3)
您可以使用
this.props.history.push("/template", { ...response })
要么
this.props.history.push("/template", { response: response })
然后,您可以通过以下代码
从/template
组件中访问已解析的数据
const state = this.props.location.state
答案 7 :(得分:2)
如果您需要传递URL参数
泰勒·麦金尼斯(Tyler McGinnis)在他的网站Link to the post
上发表了精彩的帖子解释下面是代码示例:
history.push组件上的:
this.props.history.push(/home:${this.state.userID})
上定义路由:
<Route path='/home:myKey' component={Home} />
“主页”组件上的:
componentDidMount(){
const { myKey } = this.props.match.params
console.log(myKey )
}
答案 8 :(得分:1)
不需要与Router一起使用。这对我有用:
在您的父页面中,
<BrowserRouter>
<Switch>
<Route path="/routeA" render={(props)=> (
<ComponentA {...props} propDummy={50} />
)} />
<Route path="/routeB" render={(props)=> (
<ComponentB {...props} propWhatever={100} />
)} />
</Switch>
</BrowserRouter>
然后在ComponentA或ComponentB中可以访问
this.props.history
对象,包括this.props.history.push方法。
答案 9 :(得分:1)
要使用反应16.8+(withHooks),您可以使用这种方式
import React from 'react';
import { useHistory } from 'react-router-dom';
export default function SomeFunctionalComponent() {
let history = useHistory(); // should be called inside react component
const handleClickButton = () => {
"funcionAPICALL"
.then(response => {
if (response.status >= 200 && response.status < 300) {
history.push('/template');
});
}
return ( <div> Some component stuff
<p>To make API POST request and redirect to "/template" click a button API CALL</p>
<button onClick={handleClickButton}>API CALL<button>
</div>)
}
在此处获取更多信息https://reacttraining.com/react-router/web/example/auth-workflow
答案 10 :(得分:1)
要使用 React 16.8 (withHooks) 函数式组件,你可以这样使用
我们将电话号码发送到下一页
登录.js
import { useHistory } from 'react-router-dom';
const history = useHistory();
const handleOtpVerify=(phoneNumber)=>
{
history.push("/OtpVerifiy",{mobNo:phoneNumber})
}
<button onClick={handleOtpVerify}> Submit </button>
OtpVerify.js
import useLocation from 'react-router-dom';
const [phoneNumber, setphoneNumber] = useState("")
useEffect(() => {
setphoneNumber(location.state.mobNo)
}, [location]);
return (
<p>We have sent Verification Code to your</p>
<h1>{phoneNumber}</h1>
)
答案 11 :(得分:0)
我创建了一个自定义useQuery钩子 p>
import { useLocation } from "react-router-dom";
const useQuery = (): URLSearchParams => {
return new URLSearchParams(useLocation().search)
}
export default useQuery
用作
const query = useQuery();
const id = query.get("id") as string
按原样发送
history.push({
pathname: "/template",
search: `id=${values.id}`,
});
答案 12 :(得分:-4)
添加信息以获取查询参数。
const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');
有关URLSearchParams的更多信息,请查看此链接 Test Data Builder