在兄弟組件之間傳遞狀態React Router v4

Question

我想在同級組件之間傳遞狀態： 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

問候，詹姆斯。

Answer 1

我需要一個父組件來保持兩個兄弟的狀態，但是僅使一個組件用於管理兩個組件之間的狀態沒有意義（或者會嗎？）。

是的！

幾乎不需要使用Redux或React Context API ，您將需要一個通用的父組件來保存，共享和管理對您希望兩個兄弟組件共享的狀態的更新。

如果您的組件樹簡單而又短，並且兄弟組件非常接近（即，您不需要上下傳遞狀態多層），那么這種配置就很有意義。 有一個管理狀態的父級組件，在其下呈現兩個同級。

如果樹結構很復雜（或將變得很復雜），並且組件和子組件在多層之間相互分離，則開始考慮並投資Redux商店。