How i use powerbi-router in reactjs

[FerYelAco93]

Hello,

I need help with the powerbi-router component installed with npm in my Reactjs project.

How i use, if i want a dynamic menu in my app that connect to my power BI embeded report, used the powerbi-report-component library in reactjs with the <Report /> tag.

This is my <Report /> tag:

<Report
tokenType="Embed"
accessToken={localStorage.getItem('accessToken')}
embedUrl={"https://app.powerbi.com/reportEmbed?reportId=" + REACT_APP_EMBED_REPORT_ID}
embedId={REACT_APP_EMBED_REPORT_ID}
reportMode="View"
datasetId={REACT_APP_EMBED_DATASET_ID}
groupId={REACT_APP_EMBED_GROUP_ID}
extraSettings={extraSettings}
permissions="View"
style={reportStyle}
onLoad={this.handleReportLoad}
onRender={this.handleReportRender}
/>

I store the name and displayName of the pages I need from power BI report, and I loaded dynamicly according to the rol of the user loged. I need te specific route to connect my dynamic menu with the report embed.
 
Please and thank you for everything! 

[FerYelAco93]

Thank you @v-lionel-msft,

I saw this documentation, but do not offer me the enough to start the link of my menu app to the powerbi report embeded in my reactjs project.

I need a solution likes this:

<span>
    {this.state.menuP.map(function (di, key) {
        return <SidebarLink
                  title={di.display_name}
                  icon={di.icon}
                  route={"/report/pages/"}
                  key={key} >
               </SidebarLink>
         })
     }
</span>

Where route={} might be the link to my report, like /report/pages/...etc.

Please, and thank you again

[v-lionel-msft]

Hi @FerYelAco93 ,

Maybe you can refer to this project.

GitHub - microsoft/powerbi-router: A lightweight router for the Power BI JavaScript SDK which allows...

Best regards,
Lionel Chen

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.