javascript - 无法通过反应路由器 dom v6 beta 传递状态,状态为空
问题描述
应用程序.js 文件
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>
)
}
期望传递状态,当使用 useLocation 从另一个页面获取状态时,某些数据从一个页面到另一个页面 state 为 null
index.js 文件
import {BrowserRouter as Router} from "react-router-dom";
import App from "./App";
ReactDOM.render(
<React.StrictMode>
<Router>
<App/>
</Router>
</React.StrictMode>
,
document.getElementById('root')
);
Posts.js 文件
const location=useLocation()
console.log(location);
输出
Object { pathname: "/posts", search: "", hash: "", state: null, key: "hpuuzep5" }
包.json
{
"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"
]
}
}
我不能从 react-router-dom 导入交换机,它说交换机不是从 react 路由器 dom 导出的,我认为已经正确设置了我的路由,错误在哪里,我无法将状态从一条路由传递到另一条
解决方案
我可以通过这样做获得状态:
<Link
to={"/posts"}
state={{test: 'test'}}>
Posts
</Link>
我打开了类型声明,最后意识到状态是一个道具,而不是对象的一部分https://github.com/ReactTraining/react-router/blob/dev/docs/api-reference.md#link
推荐阅读
- javascript - 如何使用 webpack 代理 devserver pathRewrite?
- jquery - 如何使用 MDBootstrap 和 jQuery 拖放文件上传
- sql - 为什么这个 postgresql text_pattern_ops 索引不在函数体内使用?
- reactjs - 为什么 React-intl 不能在 ant-design 中工作?
- php - 在动态下拉选择菜单中编写 IF 语句会给出 ERROR
- excel - 删除新表格行中的背景颜色
- windows - SSH 无响应时删除 Minikube VM
- google-apps-script - Google Sheet Scripts:如何仅比较一列以删除重复项
- excel - 根据组合框值删除行
- python - Neo4j + Django:我在哪里编写顶级驱动程序对象?