如何在React.js中使用React Router DOM导航到相同组件并传递不同的数据?

huangapple go评论70阅读模式
英文:

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

问题

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;

You can use these code snippets as a reference for your project.

英文:

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 &quot;react&quot;;
import { Menu, Sidebar } from &quot;semantic-ui-react&quot;;
import {  useNavigate } from &quot;react-router-dom&quot;;

const SidebarExampleVisible = () =&gt; {
  const navigate = useNavigate();
  const tabType = {
    Tab1: &quot;Person1&quot;,
    Tab2: &quot;Person2&quot;,
    Tab3: &quot;Person3&quot;
  };

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

export default SidebarExampleVisible;

TabExamplePointing.jsx

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

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

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

export default TabExamplePointing;

Routing.jsx

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

const Routing = () =&gt; {
  return (
    &lt;BrowserRouter&gt;
      &lt;div&gt;
        &lt;SidebarExampleVisible /&gt;
      &lt;/div&gt;
      &lt;Routes&gt;
        &lt;Route path=&quot;/&quot; element={&lt;SidebarExampleVisible /&gt;} /&gt;
        &lt;Route
          exact
          path=&quot;/components/TabExamplePointing&quot;
          element={&lt;TabExamplePointing /&gt;}
        /&gt;
      &lt;/Routes&gt;
    &lt;/BrowserRouter&gt;
  );
};

export default Routing;

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

答案1

得分: 1

需要在点击时动态修改选项卡。调用一个方法来改变选项卡内容,然后导航到组件。

以下是一个方法的示例。您也可以使用useState来实现这个功能。

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;

在此处查看代码沙箱:https://codesandbox.io/s/thirsty-cori-lebs60

英文:

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 &quot;react&quot;;
import { Menu, Sidebar } from &quot;semantic-ui-react&quot;;
import { useNavigate } from &quot;react-router-dom&quot;;

const SidebarExampleVisible = () =&gt; {
  const navigate = useNavigate();

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

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

  return (
    &lt;Sidebar as={Menu} vertical visible width=&quot;thin&quot;&gt;
      &lt;Menu.Item as=&quot;a&quot;&gt;
        &lt;span
          onClick={() =&gt; {
            navigation(&quot;Home&quot;);
          }}
        &gt;
          Home
        &lt;/span&gt;
      &lt;/Menu.Item&gt;
      &lt;Menu.Item as=&quot;a&quot;&gt;
        &lt;span
          onClick={() =&gt; {
            navigation(&quot;Channels&quot;);
          }}
        &gt;
          Channels
        &lt;/span&gt;
      &lt;/Menu.Item&gt;
      &lt;Menu.Item as=&quot;a&quot;&gt;About&lt;/Menu.Item&gt;
    &lt;/Sidebar&gt;
  );
};

export default SidebarExampleVisible;

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

答案2

得分: 0

只需为不同的路由创建不同的选项卡类型对象。
在您的代码中,您传递了相同的tabType对象。
改为尝试以下内容:

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>
    );
};
英文:

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

const SidebarExampleVisible = () =&gt; {
const navigate = useNavigate();
const tabType1 = {
Tab1: &quot;Person1&quot;,
Tab2: &quot;Person2&quot;,
Tab3: &quot;Person3&quot;
};
const tabType2 = {
Tab1: &quot;Youtube channels&quot;,
Tab2: &quot;Facebook channels&quot;,
Tab3: &quot;Telegram channels&quot;
};
return (
&lt;Sidebar as={Menu} vertical visible width=&quot;thin&quot;&gt;
&lt;Menu.Item as=&quot;a&quot;&gt;
&lt;span
onClick={() =&gt; {
navigate(`/components/TabExamplePointing`, { state: tabType1 });
}}
&gt;
Home
&lt;/span&gt;
&lt;/Menu.Item&gt;
&lt;Menu.Item as=&quot;a&quot;&gt;
&lt;span
onClick={() =&gt; {
navigate(`/components/TabExamplePointing`, { state: tabType2 });
}}
&gt;
Channels
&lt;/span&gt;
&lt;/Menu.Item&gt;
&lt;Menu.Item as=&quot;a&quot;&gt;About&lt;/Menu.Item&gt;
&lt;/Sidebar&gt;
);
};

huangapple
  • 本文由 发表于 2023年1月6日 14:02:27
  • 转载请务必保留本文链接:https://go.coder-hub.com/75027477.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定