如何在没有任何事件的情况下使用 react-router-dom 打开页面？

Posted 2023-02-22

【中文标题】如何在没有任何事件的情况下使用 react-router-dom 打开页面？

【英文标题】：How to open a page with react-router-dom without any event?

【发布时间】：2021-12-22 21:55:15

【问题描述】：

我只想在登录数据正确的情况下打开主页，即响应成功

<form>
//inputs
<button type="submit" onClick=(e) => sendData(e)> Sign-In </button>
</form>

 const sendData = (e) => 
    e.preventDefault();
    axios( method: "POST", url: url, data: data, headers: header )
      .then((res) => 
        if (res.data.status === "success") 

          props.sethistory(res.data.data.user.history);//getting data from response
          props.setsignedIn(true);  

          //what to do here to open homepage
        
      )
      .catch((err) => console.log(err));
  ;

【问题讨论】：

你能解释一下“打开主页”是什么意思吗？你的意思是，导航到主页，无论路径是什么？你试过什么？

【参考方案1】：

这肯定会对你有所帮助，

import  useHistory  from 'react-router-dom';
const history = useHistory();

然后以编程方式使用它，当您的登录名是 success 时，输入此代码，将带您到该 URL 组件主页，例如在您的情况下

history.push("/YOURURL");

【参考方案2】：

根据您使用的react-router-dom 版本，流程基本相同：发出命令式导航操作。

版本 5

在版本 5 中，这是通过 history 实现的或使用 React 钩子（useHistory、useLocation、useParams）。

例子：

import  useHistory  from 'react-router-dom';

...

// in function body "unpack" history object
const history = useHistory();

...

const sendData = (e) => 
  e.preventDefault();
  axios( method: "POST", url: url, data: data, headers: header )
    .then((res) => 
      if (res.data.status === "success") 
        props.sethistory(res.data.data.user.history);
        props.setsignedIn(true);  

        history.push("/homepage"); // <-- imperative navigation
      
    )
    .catch((err) => console.log(err));
;

useHistory

版本 6.x

在版本 6 中，API 进行了重大更新，不再存在路由道具，并且可以通过 React 挂钩访问相同的“值”。 history 对象也不再直接公开，而是为您提供了一个 navigate 函数 以使用目标路径调用。

import  useNavigate  from 'react-router-dom';

...

// in function body "unpack" navigate function
const navigate = useNavigate();

...

const sendData = (e) => 
  e.preventDefault();
  axios( method: "POST", url: url, data: data, headers: header )
    .then((res) => 
      if (res.data.status === "success") 
        props.sethistory(res.data.data.user.history);
        props.setsignedIn(true);  

        navigate("/homepage"); // <-- imperative navigation
      
    )
    .catch((err) => console.log(err));
;

useNavigate