[v6] Pass props to Outlet component

[sebascomeau]

Here's my route:

<Routes>
    <Route path="profile/*" element={<Profile />}>
        <Route path="/" element={<ViewProfile />} />
        <Route path="create" element={<CreateProfile />} />
        <Route path="update" element={<UpdateProfile />} />
    </Route>
</Routes>

I want to add props to Outlet's element but adding props to the component doesn't work. Profile is the state component of view, create and update children component.

Example:

import React, { useState, useEffect } from 'react';
import { Outlet } from 'react-router-dom';
import InternalServer from '../../errors/InternalServer';

import miscUtils from '../../../utils/MiscUtils';

const fetchProfile = async () => {
  // sleep for 3 sec
  await miscUtils.stall(3000);

  return { name: 'Sebas Comeau' };
};

const Profile = () => {
  const [profile, setProfile] = useState(null);
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        setProfile(await fetchProfile());
      } catch (err) {
        setError(err);
      }
      setIsLoading(false);
    };
    fetchData();
  }, []);

  const onProfileCreated = (profileCreated) => setProfile(profileCreated);
  const onProfileUpdated = (profileUpdated) => setProfile(profileUpdated);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <InternalServer error={error} />; // display error component

  // add props to outlet children element
  return <Outlet profile={profile} onProfileCreated={onProfileCreated} onProfileUpdated={onProfileUpdated} />;
};

export default Profile;

I'm trying with useOutlet hooks but I cannot found a way to modify the outlet.props.children.props.element.props property and returning outlet.

Any feedback is appreciated.

[sebascomeau]

I somekind make this work by doing this:

return React.cloneElement(outlet.props.children.props.element, { profile, onProfileCreated});

[sebascomeau]

I changed my return for this instead because Create and Update component requires function props and I cannot set them to something relevant into my AppRoute file.

return (
    <Routes>
      <Route path="/" element={<ViewProfile profile={profile} />} />
      <Route path="create" element={<CreateProfile profile={profile} onProfileCreated={onProfileCreated}  />} />
      <Route path="update" element={<Update profile={profile} onProfileUpdated={onProfileUpdated} />} />
    </Routes>
  );

Here's my AppRoutes now:

<Routes>
    <Route path="profile/*" element={<Profile />} />
</Routes>

[support]

👋 @sebascomeau, we use the issue tracker exclusively for bug reports and feature requests. However, this issue appears to be a support request. For usage questions, please use Stack Overflow or Reactiflux where there are a lot more people ready to help you out.
Please feel free to clarify your issue if you think it was closed prematurely.

[ozzy432836]

So this is the only way?

return (
    <Routes>
      <Route path="/" element={<ViewProfile profile={profile} />} />
      <Route path="create" element={<CreateProfile profile={profile} onProfileCreated={onProfileCreated}  />} />
      <Route path="update" element={<Update profile={profile} onProfileUpdated={onProfileUpdated} />} />
    </Routes>
  );

How about this from @sebascomeau ?

return React.cloneElement(outlet.props.children.props.element, { profile, onProfileCreated});