导航和克隆元素后道具丢失

Question

在我目前正在开发的一个应用程序中，身份验证是这样完成的，将用户的数据传递到子组件中（在 App.js 中，我宁愿使用 useContext 来访问任何组件中的用户数据）[App.js]:

const RequireAuth = ({ children }) => {

    // fetch user data from database, ...

    return <>{React.cloneElement(children, { user: {...user, ...userExtraData} })}</>;

};

然后，一个Route的例子被指定为[App.js]:

 <Route
      path="/addgame"
      element={
              <RequireAuth>
                  <FormAddGame />
              </RequireAuth>

            }
           
  />

但是，我目前的问题如下：

我想从 ComponentA 导航到 /addgame（=FormAddGame 组件，见下文），同时设置 existingGame 道具。因此，我使用 [ComponentA.js]:

let navigate = useNavigate()    
navigate('addgame', { existingGame: game })

所述FormAddGame分量为[FormAddGame.js]:

function FormAddGame({ user }) {

    const { existingGame } = useLocation()

    console.log(existingGame)
    ...
}
export default FormAddGame;

然而，当我正确导航到 /addgame 时，existingGame 道具在 FormAddGame 中停留 undefined 一次，而它应该不会（因为 game不是 undefined)

Answer 1

尝试像这样传递道具：

navigate("addgame", { state: { existingGame: game } });

并像这样解构：

const { state: { existingGame } = {} } = useLocation();

导航和克隆元素后道具丢失

Props lost after navigate and cloneElement

reactjs

react-router

react-router-dom