重定向并将从API获取的数据同时传递到React JS的另一个组件中。

huangapple
go评论92阅读模式
英文:

Redirection & Pass data fetched from API to another component in React JS simultaneously

问题

I wanted to redirect from login page to dashboard upon getting a successful response from API & pass the success message fetched through API from one component to another component at the same time. By doing so, I ultimately aim to redirect user from login page to dashboard with displaying toast message received on the success response of login API.

Login Component

  1. import { useNavigate } from "react-router-dom";
  2. import { ToastContainer, toast } from 'react-toastify';
  4. export default function Login() {
  5.   const nav = useNavigate();
  7.   const authenticateUser = () => {
  8.     const endpoint = `${baseUrl}/login`;
  9.     fetch(endpoint, {
  10.       method: 'POST',
  11.       headers: {
  12.         'Content-Type': 'application/json'
  13.       },
  14.       body: JSON.stringify(loginState)
  15.     })
  16.     .then(response => response.json())
  17.     .then(data => {
  18.       if (data.statusCode === 200) {
  19.         let toastMsg = data.message;
  20.         nav("/dashboard", { toastMsg: toastMsg });
  21.       }
  22.     })
  23.     .catch(error => console.log(error))
  24.   }
  25. }

Dashboard Component

  1. import { ToastContainer, toast } from 'react-toastify';
  2. import 'react-toastify/dist/ReactToastify.css';
  3. import { useEffect } from "react";
  4. import { useLocation } from 'react-router-dom';
  6. const Dashboard = () => {
  7.   const location = useLocation();
  9.   useEffect(() => {
  10.     if (location.state.toastMsg) {
  11.       toast(location.state.toastMsg);
  12.     }
  13.   }, [location.state.toastMsg]);
  15.   return (
  16.     <div>
  17.       <p>Welcome to your Dashboard</p>
  18.       <ToastContainer />
  19.     </div>
  20.   );
  21. };
  22. export default Dashboard;

以上是您提供的代码的翻译部分。

英文:

I wanted to redirect from login page to dashboard upon getting a successful response from API & pass the success message fetched through API from one component to another component at the same time. By doing so, I ultimately aim to redirect user from login page to dashboard with displaying toast message received on the success response of login API.

I used the useNavigate,useLocation hooks to implement this. My code does the redirection but not able to catch the data, in "Dashboard" component, which is passed from the "Login" component. I am completely a newbie to React JS. Any help is much appreciated.

Login Component

  1. import { useNavigate } from &quot;react-router-dom&quot;;
  2. import { ToastContainer, toast } from &#39;react-toastify&#39;;
  4. export default function Login() {
  5. const nav = useNavigate();
  7.  const authenticateUser = () =&gt; {
  9.         const endpoint = `${baseUrl}/login`;
  10.         fetch(endpoint,
  11.             {
  12.                 method: &#39;POST&#39;,
  13.                 headers: {
  14.                     &#39;Content-Type&#39;: &#39;application/json&#39;
  15.                 },
  16.                 body: JSON.stringify(loginState)
  17.             }).then(response =&gt; response.json())
  18.             .then(data =&gt; {
  19.                 
  20.                 if (data.statusCode === 200) {
  21.                     let toastMsg = data.message;
  22.                     nav(&quot;/dashboard&quot;,{toastMsg: toastMsg});
  23.                 }
  24.              }).catch(error =&gt; console.log(error))
  25.     }
  26. }

Dashboard Component

  1. import { ToastContainer, toast } from &#39;react-toastify&#39;;
  2. import &#39;react-toastify/dist/ReactToastify.css&#39;;
  3. import { useEffect } from &quot;react&quot;;
  4. import {useLocation} from &#39;react-router-dom&#39;;
  7. const Dashboard = () =&gt; {
  8.     const location = useLocation();
  9.   
  10.     useEffect(() =&gt; {
  11.         console.log(location) 
  12.         if (location.state.toastMsg) {
  14.             toast(location.state.toastMsg)
  15.         }, [location.state.toastMsg]
  16.     }
  17.     )
  18.   });
  19.     return (
  20.       &lt;div&gt;
  21.         &lt;p&gt;Welcome to your Dashboard&lt;/p&gt;
  22.         &lt;ToastContainer /&gt;
  23.       &lt;/div&gt;
  24.     );
  25.   };
  26.   export default Dashboard;

Below shown is the screenshot of the console tab.

重定向并将从API获取的数据同时传递到React JS的另一个组件中。

答案1

得分: 0

你在使用navigate时需要在state键中传递数据：
在你的示例中使用以下方式：

  1. nav('/dashboard', {
  2.   state: {
  3.     toastMsg: toastMsg,
  4.   },
  5. });

然后使用const location = useLocation()来获取它。传递的对象将在location.state中。

在这里查看示例：https://codesandbox.io/s/restless-frost-ji3ww6

英文:

You have to pass data in state key when using navigate:
In your example use this:

  1. nav(&#39;/dashboard&#39;, {
  2.   state: {
  3.     toastMsg: toastMsg,
  4.   },
  5. });

Then get it using const location = useLocation() . passed object will be in location.state

See example here: https://codesandbox.io/s/restless-frost-ji3ww6

huangapple
  • 本文由 发表于 2023年6月8日 19:31:06
  • 转载请务必保留本文链接：https://go.coder-hub.com/76431408.html
  • fetch-api
  • javascript
  • react-router
  • react-router-dom
  • reactjs
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定