Reactjs 将 set statehook 函数传递给子路由组件.解构错误

将react 18.2与react-router-dom 6.3配合使用 我有这种风格的路由.

<Routes>
        <Route path="/" element = {<App/>}>
             <Route path="search" element = {<Content/>} />
             <Route path="nextComp/:id" element = {<Component/>} />
        </Route>
</Routes>

在我的应用程序中，我有一个动态导航栏，我想用它来 Select 不同的生成组件(由/search中Content组件中的操作生成).在我的App组件中，有一些状态需要由Content组件设置.我向下传递信息的内容大致如下:

const App: React.FC = () => {
    const [lock, setLock] = useState<Boolean>(false);
    const [lotsQuery, setLotsQuery] = useState<lotWaferQueryInput[]>([]);

    const navigate = useNavigate();
    const onClickHandle(() => {
        navigate('/search', {state: { 
            setLock : setLock,
            setLotsQuery: setLotsQuery
        }});
    }, []);
}

在我的Content组件中，我try 使用以下命令访问数据:

const {state} : any = useLocation();
const {setLock,setLotsQuery} : any = state;

这将导致 Uncaught TypeError: Cannot destructure property 'setLock' of 'state' as it is null.我知道你不能直接序列化一个函数.我应该如何重新处理我路由数据的方式？

到目前为止，层次 struct 看起来像是

App
-Nav (child component)
-Content(search subroute)
-Component(nextComp subroute)

在Content中录入数据，然后发送到App(这是当前能够设置功能的问题).数据由App处理，然后传递到NAV并生成Component(子路由)

那么，我如何实现从子路由组件向父路由发送数据？如有任何建议，欢迎光临.