How to share on social media with logged user content?

I'm new using React, so please excuse me for the basic question. I didn't know where to find the right answer (or even how to ask the proper question). My doubt is: I have a React app where the user will have his content, which is basically a text and an image (using base64). He must be logged in to access it. I'm saving the content inside Firebase, as a JSON file with logged user.id generated by Firebase, as the category, and each user content is composed of an UUID I generate, the image (base64), and a text.

So, main page I list all the content for each logged user, and I want to put a button there so (s)he can share his content on Facebook, for instance. This "content" I'm calling a user story. So, for each listed story I create a Link to load this particular story in another page:

arrayOfStories.map((story) => (

    (...)
    <Link className="logo-container" to='/loadedstory' state={story}>

))

I'm passing the story object, which is basically the JSON with storyText, image, and uuid properties in a useLocation() state.

Then, from my loadedstory.component.jsx context page, I do this:

const LoadedStory = () => {
    const {state} = useLocation();

(...)

return (
    <>
        <div>
            
            { state && state.uuid ? (
              <div className="story-content"><img alt="Your content!" src={`data:image/png;base64,${state.image}`} className='resize-image'></img></div>

<div className="story-content"><p><span className='stroke'>{state.storyText}</span></p></div>

(...)

             ): 
            (<div></div>)}

        </div> 
(...)

    </>

As you can see, if the user wants to share this particular story on Facebook, the base URL link will be /loadedstory and won't load anything without the logged user context from useLocation().

What's the best practices for developing such shareable content within a logged context?

I was thinking about to do something like /loadedstory/:uuid to use the story UUID from each story and query Firebase everytime this context is needed, but the problem is my Firebase category is the user.id not the story.uuid. Would I need to query the whole users in the database then for this UUID? Is this the right approach?

If you 're using NextJS, you could probably keep the data as-is and generate a static page for every user and all their stories, and the pages pointing to those stories.

You could pass the user-id and story-id to the story page. That way the story can fetch the (all) the user's data and sift through it to find the story-id. If you use something like ReactQuery, it will cache so you won't feel so bad about asking for data you already have.

As far as 'best practice', generally you would make a new DB table to store each story as its own record with the user-id as an owner. You use something like GraphQL to fetch only a user, only a story, or a user and their first 25 stories.

You also need a "router" to facilitate navigating around (pages or content) without re-inventing the wheel.

One very popular solution is to build the app using NextJS. It's easy to get up and running and their starter example covers navigation.

Many projects use React Router v6 and it's well worth running through their tutorial whether you'll end up using it or not.

If you want extra type safety, check out the TanStack Router. It's new and built on the shoulders of many great ideas that preceded it.