Linking pages
To link between pages in your template, use the <Link>
component with the to
prop.
sections/FeaturedProducts.jsx
import {Prop, Link} from "builderoo"
export const props = {
title: Prop.text().label("Title"),
link: Prop.url(),
collection: Prop.collection().label("Collection")
}
const FeaturedProducts = (props) => {
return (
<section className="section">
<div className="products-list">
{ props.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>