Semantic-ui-react: Usage of react-router-dom and <Tab>

[alexgrjd]

I'm trying to add some routing (react-router-dom) to my Semantic-based React app, but for a reason or another, I can't figure out how to integrate it with my Tab component.

I have created a small sandbox here (for those who want to play around with it) with a basic example to demonstrate what I want to achieve. Basically, when the user clicks on one of the three tabs (Authorization, Configs or Config Lists) it should be routed to /authorization/, /configs/ or /config-lists/.

I'm also going to post the code here:

import ReactDOM from "react-dom";
import React, { Component } from "react";
import { Tab } from "semantic-ui-react";

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

import "semantic-ui-css/semantic.min.css";

class App extends Component {
  render() {
    const panes = [
      {
        menuItem: "Authentication",
        render: () => <Tab.Pane>Content Authentication</Tab.Pane>
      },
      {
        menuItem: "Config Lists",
        render: () => <Tab.Pane>Content Config Lists</Tab.Pane>
      },
      {
        menuItem: "Configs",
        render: () => <Tab.Pane>Content Configs</Tab.Pane>
      }
    ];
    return (
      <div className="App" style={{ marginTop: "50px" }}>
        <Tab
          menu={{ fluid: true, vertical: true, tabular: true }}
          panes={panes}
        />
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

---

How can I do that, given my vertical tab menu?

[welcome[bot]]

👋 Thanks for opening your first issue here! If you're reporting a 🐞 bug, please make sure you've completed all the fields in the issue template so we can best help.

We get a lot of issues on this repo, so please be patient and we will get back to you as soon as we can.

[layershifter]

@alexgrjd I updated your CodeSandbox, please check: https://codesandbox.io/s/react-example-qxb2k

Hope that it's clear now 🐱

[felipe-mendonca]

Hi @layershifter, in the example on codesandbox if I try to access one link direct like https://qxb2k.csb.app/auth I get the content of the home page, and both home and Authentication get in the active state, how to fix it?

[layershifter]

@felipe-mendonca good catch 👍

I updated that CodeSandbox to fix keys warning and the issue with initial tab. The important change is in defaultActiveIndex.

[irvingmoar]

Hello @layershifter, there is another issue in example - it breaks when using the back/forward browser buttons.

[weignerg]

Did anyone figure out why the back/forward browser buttons do not work?

[weignerg]

Found a fix with this: https://codesandbox.io/s/react-example-5jtuo?file=/index.js