为何直接访问子组件页面时功能失效？

嘿，这个问题的核心原因其实很直观——你的路由配置和组件状态的作用域完全脱节了！让我给你拆解清楚：

问题出在哪？ #

你现在的路由是这么配的：

• 访问/CreateRisk时，直接渲染独立的<CreateRisk />组件
• 访问/TablePage时，直接渲染独立的<TablePage />组件

但你写的CreateRisk需要依赖父组件传的addRisk方法才能工作，TablePage也需要rows属性来展示数据——这些依赖只有在<CommonAncestor />内部渲染它们的时候才会被传入！

当你直接通过路由访问这两个页面时，相当于你把它们从CommonAncestor这个“状态容器”里单独拎出来用了：

• CreateRisk没有拿到addRisk方法，点击提交自然啥也不会发生
• TablePage没有拿到rows属性，所以展示的是空数据
• 更关键的是，这时候根本没有<CommonAncestor />在运行，连localStorage的状态持久化逻辑都没启动！

而你在App组件里渲染的<CommonAncestor />，只是在首页/的时候才会运行，这时候里面的CreateRisk和TablePage才是有正确依赖的“工作版本”。

怎么解决？ #

这里有两个最常用的解决方案，你可以根据需求选：

方案一：改成嵌套路由（最简单直接） #

把CommonAncestor作为父路由的组件，让CreateRisk和TablePage作为它的子路由，这样不管你访问哪个子页面，CommonAncestor都会一直存在，状态和方法也能正常传递：

第一步：修改路由配置

// index.js里的router配置改成这样
import { createBrowserRouter, RouterProvider, Outlet } from "react-router";

const router = createBrowserRouter([
  {
    path: "/",
    element: <App />,
    children: [
      {
        path: "/",
        element: <CommonAncestor />,
        children: [
          { path: "CreateRisk", element: <CreateRisk /> },
          { path: "TablePage", element: <TablePage /> },
        ],
      },
    ],
  },
]);

第二步：修改CommonAncestor，用Outlet渲染子路由

// CommonAncestor.jsx里引入Outlet，替换原来的直接渲染
import React from "react";
import { Outlet, useOutletContext } from "react-router"; // 新增

const CommonAncestor = () => {
  // 原来的状态、useEffect、addRisk方法都保留不变
  const [allRisks, setAllRisks] = React.useState(() => {
    return JSON.parse(localStorage.getItem("allrisks")) || [];
  });

  React.useEffect(() => {
    localStorage.setItem("allrisks", JSON.stringify(allRisks));
  }, [allRisks]);

  const addRisk = (risk) => {
    setAllRisks((allRisks) => allRisks.concat(risk));
  };

  return (
    <>
      {/* 这里可以保留你的公共导航或布局 */}
      {/* 用Outlet渲染子路由，并传递上下文 */}
      <Outlet context={{ addRisk, allRisks }} />
    </>
  );
};

第三步：在子路由组件里接收上下文

// CreateRisk.jsx
import { nanoid } from "nanoid";
import { useOutletContext } from "react-router"; // 新增

function CreateRisk() {
  const { addRisk } = useOutletContext(); // 直接拿到addRisk方法
  // 原来的handleSubmission逻辑完全不变

  function handleSubmission() {
    addRisk({
      id: nanoid(),
      riskname: document.getElementById("rname").value,
      riskdesc: document.getElementById("rdesc").value,
      riskimpact: document.getElementById("rimpact").value,
      test: "test",
    });
  }

  return (
    <div>
      <input type="text" id="rname" placeholder="Risk Name" />
      <input type="text" id="rdesc" placeholder="Risk Description" />
      <input type="text" id="rimpact" placeholder="Risk Impact" />
      <button onClick={handleSubmission}>Store my data</button>
    </div>
  );
}

// TablePage.jsx
import { useOutletContext } from "react-router"; // 新增

function TablePage() {
  const { allRisks } = useOutletContext(); // 直接拿到状态数据
  return (
    <div>
      <h1>TablePage</h1>
      <div>{JSON.stringify(allRisks)}</div>
    </div>
  );
}

这样改完之后，不管你是从首页点链接，还是直接访问/CreateRisk，都会有CommonAncestor在后台管理状态，组件的依赖也都能正确拿到了。

方案二：用React Context全局管理状态（适合复杂应用） #

如果你的应用以后会越来越大，组件层级越来越多，那用Context把状态全局化会更灵活：

第一步：创建Context

// RiskContext.jsx
import React, { createContext, useContext, useState, useEffect } from "react";

const RiskContext = createContext();

export function RiskProvider({ children }) {
  const [allRisks, setAllRisks] = useState(() => {
    return JSON.parse(localStorage.getItem("allrisks")) || [];
  });

  useEffect(() => {
    localStorage.setItem("allrisks", JSON.stringify(allRisks));
  }, [allRisks]);

  const addRisk = (risk) => {
    setAllRisks(prev => prev.concat(risk));
  };

  return (
    <RiskContext.Provider value={{ allRisks, addRisk }}>
      {children}
    </RiskContext.Provider>
  );
}

// 自定义hook，简化组件调用
export function useRisk() {
  return useContext(RiskContext);
}

第二步：在根组件包裹Provider

// index.js
import { RiskProvider } from "./RiskContext";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <RiskProvider>
      <RouterProvider router={router} />
    </RiskProvider>
  </StrictMode>
);

第三步：在组件里直接用Context

// CreateRisk.jsx
import { nanoid } from "nanoid";
import { useRisk } from "./RiskContext";

function CreateRisk() {
  const { addRisk } = useRisk();
  // 提交逻辑不变
}

// TablePage.jsx
import { useRisk } from "./RiskContext";

function TablePage() {
  const { allRisks } = useRisk();
  // 渲染逻辑不变
}

这样改完之后，不管哪个路由的组件，只要用useRisk就能拿到状态和方法，完全不需要依赖父组件传递props了。

最后小提醒 #

你原来在App组件里渲染的<CommonAncestor />可以删掉了，避免重复渲染导致的状态混乱。

备注：内容来源于stack exchange，提问作者Aleks3000