In React 16 and Bootstrap 4, how do I map each tab in bootstrap Tabs component to a URL?

Question

I'm building a React 16.13.0 application with Bootstrap 4. I would like to use Tabs on a particular component, src/components/Edit.jsx ...

import React, { useEffect, useState } from "react";
import { useParams } from "react-router-dom";
import { Tabs, Tab } from "react-bootstrap";

import FormContainer from "../containers/FormContainer";
import ListPeople from "../components/people/ListPeople";
import { DEFAULT_COUNTRY_CODE } from "../utils/constants";

const { REACT_APP_PROXY } = process.env;

const Edit = (props) => {
  const { id } = useParams();
  const [key, setKey] = useState("home");
  const [coop, setCoop] = useState(null);

  useEffect(() => {
    if (coop == null) {
      fetch(REACT_APP_PROXY + "/coops/" + id)
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          const coop = data;
          coop.addresses.map((address) => {
            address.country = { code: address.locality.state.country.code };
          });
          console.log("edit cop ...");
          console.log(coop);
          setCoop(data);
        });
    }
  }, [props]);

  if (coop == null) {
    return <></>;
  }
  return (
    <div className="container">
      <h1>{coop.name}</h1>

      <Tabs id="controlled-tabs" activeKey={key} onSelect={(k) => setKey(k)}>
        <Tab eventKey="home" title="Home">
          <FormContainer coop={coop} />
        </Tab>
        <Tab eventKey="people" title="People">
          <ListPeople coop={coop} />
        </Tab>
      </Tabs>
    </div>
  );
};

export default Edit;

The thing I haven't figured out how to do is how do I map each tab to a URL? Right now I have "Home" and "People" tabs. I would like to map the "Home" tab to "/edit/<my entity id/home" and the "People" tab to "/edit/<my entity id/people". Then if someone visits either of those two URLs, the appropriate tab would be pre-selected.

Answer 1

With react-router it's pretty easy:

import {Route} from 'react-router-dom';

const Edit = () => {
  const { id } = useParams();
  ...
  return (
    <Route path="/edit/:id/:tab">
      {({ match, history }) => {
        const { tab } = match ? match.params : {};

        return (
          <Tabs
            activeKey={tab}
            onSelect={(nextTab) => history.replace(`/edit/${id}/${nextTab}`)}
          >
            ...
          </Tabs>
        );
      }}
    </Route>
  );
};

Here's an example

Or, if your parent route path looks like /edit/:id/:tab then, you can just:

const Edit = () => {
  const { id, tab } = useParams();
  const history = useHistory();
  ...
  return (
    <Tabs activeKey={tab} onSelect={(nextTab) => history.replace(`/edit/${id}/${nextTab}`)}>
    // or if you wish, you can use history.push instead of history.replace
      ...
    </Tabs>
  );
};