# React smart view link

**URL:** <https://community.forestadmin.com/t/react-smart-view-link/5698>\
**Category:** Help me!\
**Created:** [December 13, 2022, 11:41am UTC](https://community.forestadmin.com/t/react-smart-view-link/5698 "2022-12-13T11:41:33Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Simon\_BRAMI1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/simon_brami1/32/2753_2.png) [@Simon\_BRAMI1](https://community.forestadmin.com/u/Simon_BRAMI1)\
**Post date:** [December 13, 2022, 11:41am UTC](https://community.forestadmin.com/t/react-smart-view-link/5698/1 "2022-12-13T11:41:33Z")

</div>

Hello,

I’m currently creating a smart view using the react builder, I wasn’t able to find examples to create links to the details of each record, how do you deal with this ?

I would like to wrap each expertise box into its link, my current code:

```javascript
return (
      <div className='expertise-container'>
        {  
          records && records.map((record, i) => 
            <div key={record['forest-id']} className='expertise-box'>
              <h2>Expertise: {record['forest-mentorExpertiseType']['forest-value']}</h2>
              <div className='expertise-box__title'>{record['forest-title']}</div>
              <hr/>
              <div className='expertise-box__desc'>{record['forest-description']}</div>
            </div>
          )
        }
      </div>
    );

```

Thank you!

---

<div class="post-metadata">

**Author:** ![Simon\_BRAMI1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/simon_brami1/32/2753_2.png) [@Simon\_BRAMI1](https://community.forestadmin.com/u/Simon_BRAMI1)\
**Post date:** [December 13, 2022, 1:12pm UTC](https://community.forestadmin.com/t/react-smart-view-link/5698/2 "2022-12-13T13:12:30Z")

</div>

I also used the code [here](https://docs.forestadmin.com/documentation/reference-guide/smart-views/create-a-gallery-view) to create pagination however it’s not working with the following code, it keeps giving me the same page:

```javascript
    const goNext = () => {
      if (currentPage < numberOfPages) {
        return fetchRecords({ page: currentPage + 1 })
      }
    };

```

---

<div class="post-metadata">

**Author:** ![anon62739609](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@anon62739609](https://community.forestadmin.com/u/anon62739609)\
**Post date:** [December 13, 2022, 5:12pm UTC](https://community.forestadmin.com/t/react-smart-view-link/5698/3 "2022-12-13T17:12:58Z")

</div>

Hi @Simon_BRAMI1,

There is an example [here](https://docs.forestadmin.com/documentation/reference-guide/smart-views/create-a-gallery-view) (what you shared actually). Just click on the React tab.

For the next page try this instead:

```nohighlight
    const goNext = () => {
      if (currentPage < numberOfPages) {
        return fetchRecords({ currentPage: currentPage + 1 })
      }
    };

```

I renamed `page` to `currentPage`. Let me know if it works. It should if I’m not mistaken. I will correct it in the doc if so 🙏

---

<div class="post-metadata">

**Author:** ![Simon\_BRAMI1](https://dub1.discourse-cdn.com/flex013/user_avatar/community.forestadmin.com/simon_brami1/32/2753_2.png) [@Simon\_BRAMI1](https://community.forestadmin.com/u/Simon_BRAMI1)\
**Post date:** [December 13, 2022, 5:49pm UTC](https://community.forestadmin.com/t/react-smart-view-link/5698/4 "2022-12-13T17:49:40Z")

</div>

It works thanks !

Do you have any idea if it is possible while using a smart view inside a summary related data to keep the breadcrumb hierarchy when clicking the anchor tag ? Currently as I’m using an href like the example:

```javascript
<a href={`/${baseUrl.join('/')}/${collection.id}/index/record/${collection.id}/${record.id}/details`}
    className="c-gallery__image-container"
    key={record.id}>

```

It fully reloads the page to the detail of this collection and I’m losing the breadcrumb of the previous collection. It’s not a big deal but not very convenient for ops.

Let me know if you have a solution for this 🙏

Thank you

---

<div class="post-metadata">

**Author:** ![anon62739609](https://avatars.discourse-cdn.com/v4/letter/a/c2a13f/32.png) [@anon62739609](https://community.forestadmin.com/u/anon62739609)\
**Post date:** [May 22, 2023, 6:18pm UTC](https://community.forestadmin.com/t/react-smart-view-link/5698/5 "2023-05-22T18:18:39Z")

</div>

I just tested and discovered that you can yes.

```jsx
import React from 'react';
import WithEmberSupport from 'ember-react-components';
import { inject as service } from '@ember/service';

@WithEmberSupport
export default class extends React.Component {
  @service router;

  render() {
    const {
      records,
      collection,
      numberOfPages,
      recordsCount,
      currentPage,
      searchValue,
      isLoading,
    } = this.props;

    const redirectToRecord = (record) => this.router.transitionTo('project.rendering.data.collection.view-edit.details', collection.id, record.id);
    return (
      <div className='expertise-container'>
        {  
          records && records.map((record, i) => 
            <div key={record['forest-id']} className='expertise-box' onClick={() => redirectToRecord(record)}>
              <h2>Expertise: {record['forest-mentorExpertiseType']['forest-value']}</h2>
              <div className='expertise-box__title'>{record['forest-title']}</div>
              <hr/>
              <div className='expertise-box__desc'>{record['forest-description']}</div>
            </div>
          )
        }
      </div>
    );
  }
}

```