Javascript 在路由器v4的同级组件之间传递状态

我想在各种同级组件之间传递状态：

仪表板

和包含

/total

的所有路由。我的想法是，我可以在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();

从“React”导入React；
从“react dom”导入{render}；
从“/components/Router”导入路由器；
从“/registerServiceWorker”导入registerServiceWorker；
导入“/css/style.css”；
render（，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;

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“/NameSelector”导入NameSelector；
从“/Dashboard”导入仪表板；
从“/OverallGoals”导入总体目标；
从“/OverallShots”导入全局快照；
从“/总体占有”导入总体占有；
从“/OverallResults”导入总体结果；
从“/OverallFormations”导入总体信息；
常数路由器=（）=>(
);
导出默认路由器；

根据我的理解，通过

路由

传递状态不会起作用，因为

路由

实际上不会呈现任何内容。我需要一个父组件来保存两个同级的状态，但是，仅仅为了管理两个组件之间的状态而创建一个组件（或者它会吗？）是没有意义的

这方面的最佳实践是什么？它如何适合我的代码库

另外，我现在希望避免重复使用，因为当我在纯React中实现这个解决方案时，我会更加欣赏这种技术

这是一个相当新的反应，我理解这段代码可能会稍微更有效一些

编辑：

NameSelector

是一个组件，它保存一个输入字段，一旦提交到包含输入的URL，该字段就会被推送到

push（）

问候,，
詹姆斯

我需要一个父组件来保存两个同级的状态，但是，仅仅为了管理两个组件之间的状态而创建一个组件（或者它会吗？）是没有意义的

是的

基本上，除了使用Redux或，您将需要一个公共的父组件来保存、共享和管理您希望两个兄弟组件共享的状态的更新

如果您的组件树简单而简短，并且兄弟组件非常接近（即，您不需要在多个层上下传递状态），那么此配置非常有意义。如果有一个管理状态的父组件，则渲染它下面的两个同级

如果树结构是（或将变得）复杂的，组件和子组件跨多个层彼此分离，那么开始考虑并投资Redux存储
 刚刚更新了问题。实际上，需要跟踪的是各种同级组件，而不仅仅是两个。您可能会认为仪表板应该是父组件，但是它们在应用程序中是不同的实体（例如，
总体
不是
仪表板
的子目录）。我想我只是挂断了
路由器
文件如何有条件地呈现
仪表板
或
总体
页面，因为它们都包含在父组件中