[英]Can not pass state with react router dom v6 beta, state is null
export default function App() {
return (
<div className="h-100">
<Routes>
<Link to={
{
pathname: "/posts",
state: {test: 'test'}
}
}>Posts</Link>
<Route path="/" element={<Home/>}/>
<Route path="/login" element={<Login/>}/>
<Route path="/posts" element={<Posts/>}/>
</Routes>
</div>
)
}
expected to pass state,some piece of data from one page to another when using useLocation to get state from another page state is null预计会通过 state,当使用 useLocation 从另一页获取 state 时,某些数据从一页到另一页
import {BrowserRouter as Router} from "react-router-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>
,
document.getElementById('root')
);
const location=useLocation()
console.log(location);
Object { pathname: "/posts", search: "", hash: "", state: null, key: "hpuuzep5" }
{
"name": "chance",
"version": "0.1.0",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.6.3",
"axios": "^0.21.1",
"bootstrap": "^5.0.0-beta3",
"history": "^5.0.0",
"ramda": "^0.27.1",
"react": "^17.0.1",
"react-dom": "^17.0.1",
"react-router": "^5.2.0",
"react-router-dom": "^5.2.0",
"react-scripts": "4.0.2",
"styled-components": "^5.2.3",
"web-vitals": "^1.1.0"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
I can not either import switch from react-router-dom, it says switch is not exported from react router dom, I think have correctly set up my routes where is the error i can not pass state from one route to another我不能从 react-router-dom 导入交换机,它说交换机没有从 react-router dom 导出,我认为已经正确设置了我的路由,错误在哪里我无法将 state 从一条路由传递到另一条
I was able to get state by doing this:通过这样做,我能够获得 state:
<Link
to={"/posts"}
state={test: 'test'}>
Posts
</Link>
I opened the type declaration and finally realized state was a prop, and not part of the to object https://github.com/ReactTraining/react-router/blob/dev/docs/api-reference.md#link我打开了类型声明,最后意识到 state 是一个道具,而不是 object https://github.com/#bdev//docs-reference.m
You can also navigate to a certain path by using the useNavigate()
hook like so:您还可以使用
useNavigate()
挂钩导航到某个路径,如下所示:
const navigate = useNavigate();
navigate('/posts', {state: { test: 'test'}})
The full explanation is documented very well here: https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory完整的解释在这里记录得很好: https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory
I would like to add that in Version 5 you could get the state passed to the component by the props.我想补充一点,在第 5 版中,您可以通过道具将 state 传递给组件。
Now it only works using useLocation.现在它只能使用 useLocation 工作。
Component where the <Link />
is <Link />
所在的组件
<Link to={'/page1'} state={{ state: 'mystate' }} >Page 1</Link>
Component where you want to get the state您想要获取 state 的组件
import { useLocation } from 'react-router-dom';
const location = useLocation()
const { state } = location.state
I found this article about that.我找到了这篇文章。 https://ui.dev/react-router-pass-props-to-link/
https://ui.dev/react-router-pass-props-to-link/
I spend to many time around this and somehow i couldn't find any information about this on the documentation.我花了很多时间解决这个问题,但不知何故我在文档中找不到任何关于此的信息。
Hope to help someone out there希望能帮助那里的人
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.