how to pass different data using navigate to same components in react js (react router dom)

Question

I have one sidebar component in sidebar have different menu item when click on Home menu then naviagte to TabExamplePointing component and TabExamplePointing component having different name tab like Person1, Person2 etc. the problem is here when i click second menu item Channels on sidebar then i want different tab name like Youtube channels, Facebook pages etc. How to modify different tab name with every menu item. Sidebar.jsx:

import React from "react";
import { Menu, Sidebar } from "semantic-ui-react";
import {  useNavigate } from "react-router-dom";

const SidebarExampleVisible = () => {
  const navigate = useNavigate();
  const tabType = {
    Tab1: "Person1",
    Tab2: "Person2",
    Tab3: "Person3"
  };

  return (
    <Sidebar as={Menu} vertical visible width="thin">
      <Menu.Item as="a">
        <span
          onClick={() => {
            navigate(`/components/TabExamplePointing`, { state: tabType });
          }}
        >
          Home
        </span>
      </Menu.Item>
      <Menu.Item as="a">
        <span
          onClick={() => {
            navigate(`/components/TabExamplePointing`, { state: tabType });
          }}
        >
          Channels
        </span>
      </Menu.Item>
      <Menu.Item as="a">About</Menu.Item>
    </Sidebar>
  );
};

export default SidebarExampleVisible;

TabExamplePointing.jsx

import React from "react";
import { Tab } from "semantic-ui-react";
import { useLocation } from "react-router-dom";

const TabExamplePointing = () => {
  const location = useLocation();
  const tabType = location.state;
  console.log(tabType);

  const panes = [
    {
      menuItem: tabType.Tab1,
      render: () => <Tab.Pane attached={false}>Tab 1 Content</Tab.Pane>
    },
    {
      menuItem: tabType.Tab2,
      render: () => <Tab.Pane attached={false}>Tab 2 Content</Tab.Pane>
    },
    {
      menuItem: tabType.Tab3,
      render: () => <Tab.Pane attached={false}>Tab 3 Content</Tab.Pane>
    }
  ];
  return <Tab menu={{ pointing: true }} panes={panes} />;
};

export default TabExamplePointing;

Routing.jsx

import React from "react";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import TabExamplePointing from "../components/TabExamplePointing";
import SidebarExampleVisible from "../Sidebar/Sidebar";

const Routing = () => {
  return (
    <BrowserRouter>
      <div>
        <SidebarExampleVisible />
      </div>
      <Routes>
        <Route path="/" element={<SidebarExampleVisible />} />
        <Route
          exact
          path="/components/TabExamplePointing"
          element={<TabExamplePointing />}
        />
      </Routes>
    </BrowserRouter>
  );
};

export default Routing;

And here Sandbox link: https://codesandbox.io/s/optimistic-boyd-pecgne?file=/src/Sidebar/Sidebar.jsx

Lokendra Soni · Accepted Answer · 2023-01-06 06:23:50Z

You need to modify the tabs dynamically on the click. Call a method to alter the tab contents and then navigate to the component.

Below is an example of the method. You may also use useState to make this work.

import React from "react";
import { Menu, Sidebar } from "semantic-ui-react";
import { useNavigate } from "react-router-dom";

const SidebarExampleVisible = () => {
  const navigate = useNavigate();

  const navigation = (type) => {
    let tabType = {};
    switch (type) {
      case "Home":
        tabType = {
          Tab1: "Person1",
          Tab2: "Person2",
          Tab3: "Person3"
        };
        break;
      case "Channels":
        tabType = {
          Tab1: "Youtube channels",
          Tab2: "Facebook channels",
          Tab3: "Telegram channels"
        };
        break;
      default:
        tabType = {};
    }

    navigate(`/components/TabExamplePointing`, { state: tabType });
  };

  return (
    <Sidebar as={Menu} vertical visible width="thin">
      <Menu.Item as="a">
        <span
          onClick={() => {
            navigation("Home");
          }}
        >
          Home
        </span>
      </Menu.Item>
      <Menu.Item as="a">
        <span
          onClick={() => {
            navigation("Channels");
          }}
        >
          Channels
        </span>
      </Menu.Item>
      <Menu.Item as="a">About</Menu.Item>
    </Sidebar>
  );
};

export default SidebarExampleVisible;

Check the code sandbox here: https://codesandbox.io/s/thirsty-cori-lebs60

yograj tandel · Accepted Answer · 2023-01-06 06:44:35Z

simply make a different tabtype object for a different routes. in your code, you pass the same tabType object. insted try this

const SidebarExampleVisible = () => {
    const navigate = useNavigate();
    const tabType1 = {
      Tab1: "Person1",
      Tab2: "Person2",
      Tab3: "Person3"
    };

    const tabType2 = {
     Tab1: "Youtube channels",
     Tab2: "Facebook channels",
     Tab3: "Telegram channels"
    };

 return (
<Sidebar as={Menu} vertical visible width="thin">
  <Menu.Item as="a">
    <span
      onClick={() => {
        navigate(`/components/TabExamplePointing`, { state: tabType1 });
      }}
    >
      Home
    </span>
  </Menu.Item>
  <Menu.Item as="a">
    <span
      onClick={() => {
        navigate(`/components/TabExamplePointing`, { state: tabType2 });
      }}
    >
      Channels
    </span>
  </Menu.Item>
  <Menu.Item as="a">About</Menu.Item>
</Sidebar>
);
};

Collectives™ on Stack Overflow

how to pass different data using navigate to same components in react js (react router dom)

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related