如何在React Router Dom v6.4中重定向并发送数据?

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

How can I redirect in react router dom v6.4 sending data

问题

我正在使用 react-router-dom v6.4,并且我想知道我是否可以做一些事情。我想在重定向时将数据传递到另一个路由。

我知道在之前的版本中我可以使用 state 属性:

<Redirect
  to={{
    pathname: "/login",
    state: { referrer: currentLocation }
  }}
/>

然而,使用 redirect() 不起作用:

import { Form, redirect } from "react-router-dom";
  
export function action() {
  return redirect("/home", { state: { value: 5 } });
}

export default function Blog() {
  return (
    <Form method="post">
      <button>Submit</button>
    </Form>
  );
}
import { useLocation } from "react-router-dom";

export default function Home() {
  const location = useLocation();
  console.log(location.state.value);
  return <div>Home</div>;
}

在重定向时有方法可以发送数据吗?

英文:

I am using react-router-dom v6.4 and I am wondering if I can do something. I want to pass data to another route when I redirect.

I know that in the previous version I can use the state prop:

<Redirect
  to={{
    pathname: "/login",
    state: { referrer: currentLocation }
  }}
/>

However, using redirect() that doesn't work:

import { Form, redirect } from "react-router-dom";

export function action() {
  return redirect("/home", { state: { value: 5 } });
}

export default function Blog() {
  return (
    <Form method="post">
      <button>Submit</button>
    </Form>
  );
}
import { useLocation } from "react-router-dom";

export default function Home() {
  const location = useLocation();
  console.log(location.state.value);
  return <div>Home</div>;
}

Is there a way to send data when redirecting?

答案1

得分: 1

根据 react-router-dom 版本:6.x,您需要使用 <Navigate /> 替代 <Redirect /> 并可以在该组件中传递 url

另外,要传递状态值,您需要用 navigate("notifications", {state: { value: 5 }}) 替换 redirect("/home", { state: { value: 5 } }),其中 navigate 被定义为 const navigate = useNavigate(); 并从 react-router-dom 中导入,使用 import { useLocation, useNavigate } from "react-router-dom";

所以你的代码将是,

import { Navigate } from "react-router-dom";    
<Route
   path="/" 
   element={<Navigate to="/login" />}
/>

然后使用 navigate

import { Form, useNavigate } from "react-router-dom";

export function action() {
    const navigate = useNavigate();
    return navigate("/home", { state: { value: 5 } });
}

export default function Blog() {
  return (
    <Form method="post">
      <button>Submit</button>
    </Form>
  );
}

然后您将在 location.state.value 中接收到值。

英文:

Accroding to react-router-dom version : 6.x you have to use the <Navigate /> instead of <Redirect /> and you can pass the url in that component

Also, to pass the state values you have to replace the redirect("/home", { state: { value: 5 } }) with navigate("notifications", {state: { value: 5 }})
where navigate is defined as const navigate = useNavigate(); and imported from the react-router-dom with import { useLocation, useNavigate } from "react-router-dom";

So your code will be,

import { Navigate } from "react-router-dom";    
<Route
   path="/" 
   element={<Navigate to="/login" />}
/>

then use navigate

import { Form, useNavigate } from "react-router-dom";

export function action() {
    const navigate = useNavigate();
    return navigate("/home", { state: { value: 5 } });
}

export default function Blog() {
  return (
    <Form method="post">
      <button>Submit</button>
    </Form>
  );
}

and you will recieve the values in location.state.value.

huangapple
  • 本文由 发表于 2023年4月17日 17:19:51
  • 转载请务必保留本文链接:https://go.coder-hub.com/76033557.html
匿名

发表评论

匿名网友

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

确定