我想在各个同级组件之间传递状态: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();
路由器.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
问候, 詹姆斯。
最佳答案
I need a parent component to hold state for both siblings however it doesn't make sense to make a component solely for managing state between the two components (or would it?).
确实如此!
差不多,除了使用 Redux 或 React Context API ,您将需要一个公共(public)父组件来保存、共享和管理您希望两个同级组件共享的状态的更新。
如果您的组件树简单而短,并且同级组件非常接近(即您不需要在多个层中上下传递状态),那么此配置很有意义。有一个管理状态的父组件,在其下面渲染两个兄弟组件。
如果树结构很(或将变得)复杂,组件和子组件跨多个层彼此分离,那么开始考虑并投资 Redux 存储。
关于javascript - 在同级组件之间传递状态 React Router v4,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49396694/