React使用Context实现全局状态结合BrowserRouter报错排查

核心错误原因与修复 #

1. Context包裹位置违反React Router v6规则 #

React Router v6中<Routes>组件的直接子节点仅支持<Route>组件或React片段（<Fragment>/<>），你当前将<Store>直接放在<Routes>内部作为子元素，路由遍历解析子节点时无法识别非Route类型节点，直接触发undefined is not an object (evaluating 'element.type.name')错误。

修复代码（App.jsx）

将Store组件移到Routes外层，全局包裹所有路由即可：

export default function App() {
  return (
    <main>
      <Store>
        <Routes>
          <Route path="/" element={<Welcome />} />
          <Route path="/whoareyou" element={<WhoAreYou />} />
          <Route path="/questionone" element={<QuestionOne />} />
          <Route path="/questiontwo" element={<QuestionTwo />} />
          <Route path="/questionthree" element={<QuestionThree />} />
          <Route path="/result" element={<Result />} />
        </Routes>
      </Store>
    </main>
  );
}

2. useContext钩子未导入 #

业务组件中调用useContext(Context)时，未从react包中导入useContext钩子，触发React.jsx: type is invalid警告，运行时会直接中断。

修复方式

在WhoAreYou等所有使用全局Context的组件顶部，补充对应导入：

// 导入React内置钩子
import { useContext } from "react";
// 导入你在Points.js中定义的Context，路径按实际项目结构调整
import { Context } from "../Points.js";

积分累加功能实现参考 #

你当前按钮点击事件仅打印了积分值，要实现点击加积分逻辑，注意不可直接修改原state，需要传入新的状态对象：

onClick={() => {
  setState(prevState => ({
    ...prevState,
    points: prevState.points + 1
  }))
  // 加完后再执行路由跳转/其他业务逻辑
}}

注意事项 #

• 导入模块时注意区分命名导出和默认导出：你定义的Context和Store都是命名导出，导入时需要用花括号包裹，不要和默认导出的导入写法混淆
• 后续如果扩展全局状态字段，建议在Store中封装统一的状态操作方法，避免setState逻辑散落在各个业务组件中，增加维护成本

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