[英]Passing state between sibling components React Router v4
我想在同级组件之间传递状态: Dashboard
和所有包含/overall
路由。 一个想法是,我可以在URL中包含/overall
任何页面上单击一个按钮,它会获取相应的值并将该值移至仪表板。 我一直在阅读有关该主题的文章,但是我一直在努力了解哪种方法最适合我的目的。
index.js
import React from "react";
import { render } from "react-dom";
import Router from "./components/Router";
import registerServiceWorker from "./registerServiceWorker";
import "./css/style.css";
render(<Router />, document.getElementById("main"));
registerServiceWorker();
Router.js
import React from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import NameSelector from "./NameSelector";
import Dashboard from "./Dashboard";
import OverallGoals from "./OverallGoals";
import OverallShots from "./OverallShots";
import OverallPossession from "./OverallPossession";
import OverallResults from "./OverallResults";
import OverallFormations from "./OverallFormations";
const Router = () => (
<BrowserRouter>
<Switch>
<Route exact path="/" component={NameSelector} />
<Route exact path="/:gamerId/dashboard" component={Dashboard} />
<Route exact path="/:gamerId/overall/goals" component={OverallGoals} />
<Route exact path="/:gamerId/overall/shots" component={OverallShots} />
<Route
exact
path="/:gamerId/overall/results"
component={OverallResults}
/>
<Route
exact
path="/:gamerId/overall/possession"
component={OverallPossession}
/>
<Route
exact
path="/:gamerId/overall/formations"
component={OverallFormations}
/>
<Route component={NotFound} />
</Switch>
</BrowserRouter>
);
export default Router;
据我了解,通过Route
传递状态是行不通的,因为Route
实际上并没有渲染任何东西。 我需要一个父组件来保持两个兄弟的状态,但是仅使一个组件用于管理两个组件之间的状态没有意义(或者会吗?)。
最佳做法是什么,它如何适合我的代码库?
另外,我现在想避免使用Redux,因为当我在纯React中实现该解决方案时,我会更加欣赏这项技术。
对React来说还算是新手,我知道这段代码可能会更高效。
编辑: NameSelector
是一个包含输入字段的组件,该字段一旦提交push()
到包含输入的URL
问候,詹姆斯。
我需要一个父组件来保持两个兄弟的状态,但是仅使一个组件用于管理两个组件之间的状态没有意义(或者会吗?)。
是的!
几乎不需要使用Redux或React Context API ,您将需要一个通用的父组件来保存,共享和管理对您希望两个兄弟组件共享的状态的更新。
如果您的组件树简单而又短,并且兄弟组件非常接近(即,您不需要上下传递状态多层),那么这种配置就很有意义。 有一个管理状态的父级组件,在其下呈现两个同级。
如果树结构很复杂(或将变得很复杂),并且组件和子组件在多层之间相互分离,则开始考虑并投资Redux商店。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.