我们如何在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');
});
我们如何在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');
});
当前回答
带有钩子的React 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>
);
}
其他回答
For the earlier versions: history.push('/[pathToSomeWhere]', yourData); And get the data in the related component just like below: this.props.location.state // it is equal to yourData For the newer versions the above way works well but there is a new way: history.push({ pathname: '/[pathToSomeWhere]', state: yourData, }); And get the data in the related component just like below: Class Component this.props.location.state; // it is equal to yourData Function Component const location = useLocation(); location.state; // it is equal to yourData
有时需要使用Link或NavLink组件,而不是使用历史记录。推动作用。你可以用下面的like:
<Link
to={{
pathname: '/[pathToSomeWhere]',
state: yourData
}}
>
...
</Link>
提示:状态键名称应在最新版本中使用。
添加信息以获取查询参数。
const queryParams = new URLSearchParams(this.props.location.search);
console.log('assuming query param is id', queryParams.get('id');
有关URLSearchParams的更多信息,请查看此链接 URLSearchParams
您可以使用location将状态发送到其他组件,就像这样
在源组件中
this.props.history.push(pathComponent, sendState);
pathComponent是接收状态的目标组件
在目标组件中 如果您使用类组件,您可以像这样接收状态
Javascript版本
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
}
奖金
如果你想重置收到的状态。使用历史记录替换位置,像这样
this.props.history({pathName: currentPath, state: resetState})
“currentPath”为目标组件路径 resetState是你想要的新值状态
如果你需要传递URL参数
Tyler McGinnis在他的网站上有一个很好的解释,链接到这个帖子
下面是代码示例:
关于历史。将组件: this.props.history.push(“/ home: $ {this.state.userID}”) 在路由器组件上定义路由: <路由路径='/home:myKey'组件={home} /> Home组件:
componentDidMount(){
const { myKey } = this.props.match.params
console.log(myKey )
}
要使用React 16.8(带hooks)功能组件,您可以使用这种方式 我们发送PhoneNumber到Next Page Login.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>
)
React路由器dom版本6.2.1 useNavigate()已弃用
import { useNavigate } from "react-router-dom";
const navigate = useNavigate()
onClick={() => { navigate('/OtpVerifiy',{mobNo:phoneNumber}) }}