1

I've got a magento 2.3.1 site with venia storefront a react front end and I'm trying to get the breadcrumbs to pull the page titles dynamically rather than pulling the url.

My current code for the breadcrumbs is as follows

import withBreadcrumbs from "react-router-breadcrumbs-hoc";
import React, { Component } from 'react';
import { Link } from 'src/drivers';
import defaultClasses from "./breadcrumbs.css";
import classify from 'src/classify';
import { BrowserRouter } from "react-router-dom";

const urlSuffix = '.html';

class Breadcrumbs extends Component {

    url(url){
        if(url ==='/')
        {
            return `${url}`
        }else {
            return `${url}`
        }
    }


    render () {

        const Breadcrumbs =  withBreadcrumbs()(({ breadcrumbs }) => (

            <ul className={defaultClasses.categorybreadcrumbs}>
                {breadcrumbs.map(({match, breadcrumb }) => (
                    <li key={match.url}>
                        <Link to={this.url(match.url)}>{breadcrumb}</Link>
                    </li>
                ))}
            </ul>

        ));

        return (<Breadcrumbs />)

    }
}

export default classify(defaultClasses)(Breadcrumbs);

I've tried to do something as long the lines of:

    const routes = [
        {
            path: {match.url}, breadcrumb: {page.title}
        }
    ]

But I don't seem to be having any luck achieve what I need. At the moment it currently pulls the breadcrumbs using the URL of the pages and I need it to ideally use the Page titles instead, but it needs to happen dynamically as I can't add a route for every single page when there's thousands of product pages.

I've had a look for other react extensions but can't seem to find anything that does what I need. Can anyone help? Any help would be greatly appreciated.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.