Linking pages

To link between pages in your template, use the <Link> component with the to prop.

sections/FeaturedProducts.jsx

import {Prop, Link, useProps} from "builderoo"
 
export const props = {
  title: Prop.text().label("Title"),
  link: Prop.url(),
  collection: Prop.collection().label("Collection")
}
 
const FeaturedProducts = () => {
  const {collection} = useProps()
  return (
    <section className="section">
      <div className="products-list">
        { collection && collection.products.map(product => (
          <div key={product._id}>
            <div>{product.title}</div>
            <Link to={product}>View Product</Link>
          </div>
        ))}
      </div>
    </section>
  )
};
 
export default FeaturedProducts

This is required for all model pages such as product, collection etc. To reference other pages, you can also use the href prop. For example:

if you have a page json file at path pages/company/about-us.json, you can link to it like this:

<Link href="/company/about-us">About us</Link>

Data for development Tips