I'm trying to create a single page from the id that is passed as a parameter.

my routes structure:

When I pass the mouse over an item in my list I get the id of the firebase document so I need to create a page to show the data in the documents based on their ids.

http://localhost:3000/category/rent/541KqSMHpU17QuYLihFs

id:

541KqSMHpU17QuYLihFs

My listItem component:

<script>
    export let listing
    export let id
    export let handleDelete
    import DeleteIcon from '../../static/assets/svg/deleteIcon.svg'
</script>

<li >
    <a href={`/category/${listing.type}/${id}`} >
        <img src={listing.imgUrls[0]} alt={listing.name}  />
        <div >
            <p >
                {listing.location}
            </p>
            <p >
                {listing.name}
            </p>
            <p >
                ${listing.offer
                    ? listing.discountedPrice.toString().replace(/\B(?=(\d{3}) (?!\d))/g, '.')
                    : listing.regularPrice.toString().replace(/\B(?=(\d{3}) (?!\d))/g, '.')}
                {listing.type === 'rent' ? '/ por mês' : ''}
            </p>
            <div >
                <img src="/assets/svg/bedIcon.svg" alt="cama" />
                <p >
                    {listing.bedrooms > 1 ? `${listing.bedrooms} camas` : `${listing.bedrooms} cama`}
                </p>
                <img src="/assets/svg/bathtubIcon.svg" alt="banheiro" />
                <p >
                    {listing.bathrooms > 1
                        ? `${listing.bathrooms} banheiros`
                        : `${listing.bathrooms} banheiro`}
                </p>
            </div>
        </div>
    </a>
    {#if handleDelete}
        <DeleteIcon
            
            fill="rgb(231, 76, 60)"
            onClick={() => {
                handleDelete(listing.id, listing.name)
            }}
        />
    {/if}
</li>

The important thing here is it:

<a href={`/category/${listing.type}/${id}`} >

How do I make my [listingId] slug be the id page?

my [listingId].svelte so far:

<script>
    import { page } from '$app/stores'
    const listingId = $page.params.listingId
    import { db } from '../../../../firebase.config.js'

    // get the id parameter from the url

</script>

Happy new Year!!

CodePudding user response：

I had a little trouble understanding your question at first.

As it stands now, your URIs are in the shape /category/id/[listingId], so http://localhost:3000/category/rent/541KqSMHpU17QuYLihFs won't get matched. What you need are URIs in the shape of /category/[id]/[listingId]. So you need to rename your id directory to [id] in order to make it dynamic.

You will then be able to retrieve the id the same way you do listingId:

<script>
    import { page } from '$app/stores'
    const { id, listingId }  = $page.params
    import { db } from '../../../../firebase.config.js'

    // do stuff

</script>

With the above URL as an example, id will hold the value 'rent' and listingId will hold the value '541KqSMHpU17QuYLihFs'.

Hope this answers your question (and happy new year to you as well!)

Edit: a better, more explicit name for the [id] parameter would be [listingCategory] and would improve the readability of your code/the understanding of your intent.