英文:
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论