Skip to content

Discussion: react-tabs vs. react-router links #2621

Closed
@lindapaiste

Description

@lindapaiste

Increasing Access

Using standard HTML <a> tags for links is more semantically correct and allows for standard right-click behavior.

Feature enhancement details

There are multiple places in the app where we use tabs to switch between content. Some of these are coded using the react-tabs package, while others use <Link> elements from react-router-dom.

It is my opinion that we should use the react-router-dom approach in situations where the tabs have different URLs but I want to open this up for discussion.

Advantages of react-router-dom

  • We can use the router to control the content on the page, instead of manually switching based on pathname
    useEffect(() => {
    if (location.pathname === '/privacy-policy') {
    setSelectedIndex(0);
    } else if (location.pathname === '/terms-of-use') {
    setSelectedIndex(1);
    } else {
    setSelectedIndex(2);
    }
    }, [location]);
  • We don't need any callback function when changing tabs.
    function onSelect(index, lastIndex, event) {
    if (index === lastIndex) return;
    if (index === 0) {
    setSelectedIndex(0);
    history.push('/privacy-policy');
    } else if (index === 1) {
    setSelectedIndex(1);
    history.push('/terms-of-use');
    } else if (index === 2) {
    setSelectedIndex(2);
    history.push('/code-of-conduct');
    }
    }
  • We can automatically highlight the current tab using the NavLink component (instead of Link) https://reactrouter.com/en/main/components/nav-link
  • Links render as HTML <a> elements which is more semantically correct and allows for standard right-click behavior.
    image
  • Screen readers understand links, and they can be focused using Tab navigation.

Current Usage

image
Legal page - uses react-tabs
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/Legal/pages/Legal.jsx

image
Dashboard page - uses react-router-dom (with manual routing and highlighting that I would like to clean up)
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/User/components/DashboardTabSwitcher.jsx

image
Preferences modal - uses react-tabs
This would stay as-is because there is no URL change involved
https://github.com/processing/p5.js-web-editor/blob/185a0b1ed3cef02957bd9bc04d25b33c33eee11d/client/modules/IDE/components/Preferences/index.jsx

Metadata

Metadata

Assignees

No one assigned

    Labels

    Area: Code QualityFor refactoring, cleanup, or improvements to maintainabilityEnhancementImprovement to an existing feature

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions