question-mark

Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

no way to use Tab & TabLink with NavLink from 'react-router'

See original GitHub issue

Issue Description

<Tab isActive>
  <TabLink>Name</TabLink>
</Tab>

will generate:

<li class="is-active">
  <a>Name</a>
</li>

But, NavLink from react-router can only add className to itself, if it’s active.

<NavLink to="/path" activeClassName="is-active" >Title</NavLink>

if we’re in /path url, it will generate:

<a href="/path" class="is-active">Title</a>

So, even if we compose NavLink & TabLink, there’s still no way to use bulma’s style with it. Because, we can’t add className to Tab when NavLink is active.

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Comments:9 (4 by maintainers)

github_iconTop GitHub Comments

3reactions
AlgusDarkcommented, Sep 4, 2017

@MunifTanjim , you’re right, there is no easy way to use NavLink, but remember that you have Link and you can use it like this example. This example is based on React Router custom link example.

Since Bulma use this kind of classes for tabs, we’re unable to change the behavior. I’ve been really busy but I want to change this kind of stuff (since Bulma is not intended for React while Bloomer is ) and make Bloomer React friendly with other famous libraries, styled-components is going to help us to achieve this.

import React from "react";
import { render } from "react-dom";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

import { Tabs, Tab, TabList, TabLink, Icon } from "bloomer";

const Pictures = () => (
  <div>
    <h2>Pictures</h2>
  </div>
);

const Music = () => (
  <div>
    <h2>Music</h2>
  </div>
);

const Video = () => (
  <div>
    <h2>Video</h2>
  </div>
);

const Documents = () => (
  <div>
    <h2>Documents</h2>
  </div>
);

const CustomTab = ({ label, to, activeOnlyWhenExact, icon }) => (
  <Route
    path={to}
    exact={activeOnlyWhenExact}
    children={({ match }) => (
      <Tab isActive={match}>
        <Link to={to}>
          <Icon isSize="small">
            <span className={`fa fa-${icon || "image"}`} aria-hidden="true" />
          </Icon>
          <span>{label}</span>
        </Link>
      </Tab>
    )}
  />
);

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <Tabs>
            <TabList>
              <CustomTab activeOnlyWhenExact={true} to="/" label="Pictures" />
              <CustomTab to="/music" label="Music" icon="music" />
              <CustomTab to="/video" label="Video" icon="film" />
              <CustomTab to="/documents" label="Documents" icon="file-text-o" />
            </TabList>
          </Tabs>

          <Route exact path="/" component={Pictures} />
          <Route path="/music" component={Music} />
          <Route path="/video" component={Video} />
          <Route path="/documents" component={Documents} />
        </div>
      </Router>
    );
  }
}

render(<App />, document.getElementById("root"));
2reactions
pauleverittcommented, Mar 8, 2018

Here you go: https://gist.github.com/pauleveritt/c5bc6d6f317daede74b97216294bb87f

I suspect the gist will be insufficient as well, as this is an interaction with react-router 4. Meaning, if I need to make a small repo, let me know.

Read more comments on GitHub >

github_iconTop Results From Across the Web

How to lead a link click to common page & activate tab items ...
How to lead a link click to common page & activate tab items under React Router · click of Foundation Sub 1 should...
Read more >
Handling Tabs Using Page URLs and React Router Doms
Learn how to maintain your active tab by using URL parameters and leveraging React Router Dom instead of using React state.
Read more >
NavLink v6.6.1 - React Router
This is useful when building a navigation menu such as a breadcrumb or a set of tabs where you'd like to show which...
Read more >
How to handle navigation in your app with React Router Link
The first two will use the Link and NavLink components, while the last one will make use of the Redirect component. Let's get...
Read more >
Using the Link and NavLink Components to Navigate to a Route
React -Router provides the and components, which allow you to ... Navigation links created with <Link> and <NavLink> do not result in a...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found