react-router-dom使用Navigate报非合法React子元素错误

报错触发的核心原因是你的条件渲染分支返回了函数本身，而非合法的React可渲染节点。
React JSX 渲染时仅支持识别以下类型的子节点：

• DOM标签、已实例化的组件
• 字符串、数字
• null、undefined、布尔值（渲染时会直接忽略）
• 由合法节点组成的数组

你写的三元表达式真值分支(() => (<Navigate to = "/search"/>))是一个未执行的箭头函数定义，React无法将函数作为页面内容渲染，因此抛出了对应报错。
你之前核对路由配置的方向是对的，/search路由本身的配置没有问题，问题完全出在条件渲染语句的写法上。

直接去掉条件分支里多余的箭头函数包裹，让真值分支直接返回<Navigate />组件实例即可，修改后的对应代码段：

<Form className="d-flex">
  <FormControl
    type="search"
    placeholder="Search"
    className="me-2"
    aria-label="Search"
    id = "SearchBox"
  />
  {/* 修复后的条件渲染逻辑 */}
  {redirect === true? <Navigate to="/search" /> : null}
  <Button variant="outline-success" onClick={pressSearch}>Search</Button>
</Form>

补充说明：

• 原代码中按钮点击事件onClick = {() => pressSearch()}属于冗余写法，可以直接简化为onClick={pressSearch}，不影响功能但代码更简洁。
• 如果需要控制跳转行为是否替换当前浏览器历史记录（即点击浏览器返回按钮能否回到跳转前的页面），可以给Navigate组件按需添加replace属性：需要禁止返回当前页就加replace，需要保留返回能力就写<Navigate to="/search" replace={false} />。

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