React Router v4中兄弟组件间的状态传递问题

Hey there! Let's break down the best solutions for your scenario—passing state from your /overall route components to the sibling Dashboard component when a button is clicked. Since these are sibling components (they share a common parent, probably your root App component where the router is configured), we’ve got a few solid options ranked by how well they fit your use case:

1. Lift State to the Common Parent (Most Straightforward & Recommended for Simple Cases) #

This is the go-to approach for small-scale sibling component communication. It’s simple, requires no extra libraries, and plays perfectly with your routing setup.

How to Implement: #

• Add state to your root component (where you define routes) to hold the value you want to pass to Dashboard.
• Create a setter function that your /overall components can call to update this state.
• Since you have multiple /overall sub-routes, use nested routing to avoid passing the setter prop to every single /overall component individually.

Example Code:

Root Component (e.g., App.js):

import React, { useState } from "react";
import { Routes, Route, Outlet } from "react-router-dom";
import Dashboard from "./Dashboard";
import OverallPage1 from "./OverallPage1";
import OverallPage2 from "./OverallPage2";

// Wrapper for all /overall routes to pass the setter function
function OverallWrapper({ onUpdateValue }) {
  // We'll use a tiny context here to pass the setter to child routes easily
  const OverallContext = React.createContext();
  return (
    <OverallContext.Provider value={onUpdateValue}>
      <Outlet />
    </OverallContext.Provider>
  );
}

// Custom hook for /overall components to access the setter
export function useUpdateDashboard() {
  return React.useContext(React.createContext());
}

function App() {
  const [dashboardValue, setDashboardValue] = useState(null);

  const updateDashboard = (newValue) => {
    setDashboardValue(newValue);
  };

  return (
    <div className="app-container">
      {/* Dashboard receives the current state value */}
      <Dashboard currentValue={dashboardValue} />
      
      <Routes>
        // Nest all /overall routes under a parent wrapper
        <Route 
          path="/overall" 
          element={<OverallWrapper onUpdateValue={updateDashboard} />}
        >
          <Route path="page1" element={<OverallPage1 />} />
          <Route path="page2" element={<OverallPage2 />} />
          {/* Add more /overall sub-routes here */}
        </Route>
        {/* Other app routes... */}
      </Routes>
    </div>
  );
}

export default App;

An /overall Component (e.g., OverallPage1.js):

import { useUpdateDashboard } from "./App";

function OverallPage1() {
  const updateDashboard = useUpdateDashboard();

  const handleButtonClick = () => {
    // Pass your desired value to the Dashboard
    updateDashboard("Data from Overall Page 1");
  };

  return (
    <div>
      <h2>Overall Page 1</h2>
      <button onClick={handleButtonClick}>Send Value to Dashboard</button>
    </div>
  );
}

export default OverallPage1;

Dashboard Component:

import React from "react";

function Dashboard({ currentValue }) {
  return (
    <div className="dashboard">
      <h3>Dashboard</h3>
      <p>Received from /overall: {currentValue || "No data yet"}</p>
    </div>
  );
}

export default Dashboard;

2. React Context API (Great for Scaling) #

If you anticipate adding more components that need to share this state later, or if your component hierarchy grows deeper (making prop drilling tedious), the Context API is a cleaner, more scalable choice. It lets you pass state through the component tree without manual prop passing.

How to Implement: #

Step 1: Create a Context File

// DashboardContext.js
import React, { createContext, useState, useContext } from "react";

const DashboardContext = createContext();

export function DashboardProvider({ children }) {
  const [dashboardValue, setDashboardValue] = useState(null);

  return (
    <DashboardContext.Provider 
      value={{ dashboardValue, setDashboardValue }}
    >
      {children}
    </DashboardContext.Provider>
  );
}

// Custom hook to simplify context consumption
export function useDashboardState() {
  return useContext(DashboardContext);
}

Step 2: Wrap Your App with the Provider

// App.js
import { DashboardProvider } from "./DashboardContext";

function App() {
  return (
    <DashboardProvider>
      <Dashboard />
      <Routes>
        <Route path="/overall/page1" element={<OverallPage1 />} />
        <Route path="/overall/page2" element={<OverallPage2 />} />
      </Routes>
    </DashboardProvider>
  );
}

Step 3: Use the Context in Components

• In an /overall component:

import { useDashboardState } from "./DashboardContext";

function OverallPage1() {
  const { setDashboardValue } = useDashboardState();

  return (
    <button onClick={() => setDashboardValue("Updated from Page 1")}>
      Send to Dashboard
    </button>
  );
}

• In Dashboard:

import { useDashboardState } from "./DashboardContext";

function Dashboard() {
  const { dashboardValue } = useDashboardState();
  return <p>Current Value: {dashboardValue}</p>;
}

3. State Management Libraries (For Larger Apps) #

If your app already uses a library like Redux, Zustand, or Jotai for complex state management, you can leverage it here. This is overkill for just this one use case, but it makes sense if you have extensive cross-component state needs.

Example with Zustand (Lightweight Option): #

Create a Store:

// store.js
import { create } from 'zustand';

export const useDashboardStore = create((set) => ({
  dashboardValue: null,
  setDashboardValue: (newValue) => set({ dashboardValue: newValue }),
}));

Use in Components:

• /overall component:

import { useDashboardStore } from './store';

function OverallPage1() {
  const setDashboardValue = useDashboardStore((state) => state.setDashboardValue);
  
  return <button onClick={() => setDashboardValue("From Zustand")}>Send Value</button>;
}

• Dashboard:

import { useDashboardStore } from './store';

function Dashboard() {
  const value = useDashboardStore((state) => state.dashboardValue);
  
  return <p>Value: {value}</p>;
}

Which Solution Should You Pick? #

• Go with State Lift if this is a one-off communication and your component hierarchy is simple. It’s the easiest to implement and maintain.
• Use Context API if you expect to expand state sharing to more components later, or if prop drilling becomes cumbersome.
• Choose a State Management Library only if your app already uses one, or if you have complex state needs beyond this single use case.

内容的提问来源于stack exchange，提问作者James Barrett