英文:
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 "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
答案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 "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
答案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 = () => {
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>
);
};
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论