Reactstrap: Combining Pagination with react-router-dom Link

Created on 8 Sep 2017 · 3Comments · Source: reactstrap/reactstrap

Is there a way of using pagination with the Link tag/component from the react-router-dom library. I cannot insert it into the pagination example as it give errors for putting an tag inside an tag. Is there a workaround?

Source

sjorsvanheuveln

Most helpful comment

I don't think it's in the docs yet, but there's examples of usage with Link from react-router-dom on both these issues, one references the other.

https://github.com/reactstrap/reactstrap/issues/83#issue-168537815

https://github.com/reactstrap/reactstrap/issues/298

import React from 'react';
import { Link } from 'react-router';
import { Container, Row, Col, Nav, NavItem, NavLink } from 'reactstrap';

const Example = (props) => {
  return (
    <NavItem>
      <NavLink tag={Link} to="/test" activeClassName="active">
        {props.item.name}
      </NavLink>
    </NavItem>
  );
};

ananthamapod on 14 Sep 2017

👍8 ❤3

All 3 comments

I don't think it's in the docs yet, but there's examples of usage with Link from react-router-dom on both these issues, one references the other.

https://github.com/reactstrap/reactstrap/issues/83#issue-168537815

https://github.com/reactstrap/reactstrap/issues/298

import React from 'react';
import { Link } from 'react-router';
import { Container, Row, Col, Nav, NavItem, NavLink } from 'reactstrap';

const Example = (props) => {
  return (
    <NavItem>
      <NavLink tag={Link} to="/test" activeClassName="active">
        {props.item.name}
      </NavLink>
    </NavItem>
  );
};

ananthamapod on 14 Sep 2017

👍8 ❤3

@ananthamapod Thanks for the note, you saved my life 👍

cairocoder on 28 Sep 2017

I'm closing this since the the issue is no longer active and it appear it was answered above. Please comment and it will be opened if you feel the issue has not been resolved / the question has not been answered