Passing state between sibling components React Router v4

Question

I want to pass state between various sibling components: Dashboard and all routes which contain /overall . Thea idea is that I can click a button on any of the pages which contain /overall in the URL and it gets the corresponding value and moves that value to the dashboard. I've been doing some reading around this subject however I'm struggling to understand which is the best implementation for my purpose.

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;

From my understanding, passing state through the Route wouldn't work as Route doesn't actually render anything. 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?).

What's the best practice for this and how would it fit into my codebase?

Also, I want to avoid Redux for now, as I will appreciate the technology more when I implement this solution in pure React.

Fairly new to React, I understand this code could be slightly more efficient.

EDIT: NameSelector is a component which holds an input field which once submitted push() es to a URL containing the input

Regards, James.

Answer 1

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?).

It does!

Pretty much, short of using Redux or the React Context API , you are going to need a common parent component that holds, shares, and manages updates to the state that you'd like your two sibling components to share.

If your component-tree is simple and short, and the sibling components are in close proximity (ie you don't need to pass the state up-and-down multiple tiers), then this configuration makes a lot of sense. Have a parent component that manages state, render the two siblings underneath it.

If the tree structure is (or will become) complex, with components and subcomponents separated from each other across multiple tiers, then start thinking about and investing in a Redux store.