英文:
How to disable a route based on a condition
问题
我需要使菜单项仍然存在于子菜单中，但在某种条件下变为禁用状态，条件始终相同。在上面的代码中，对于具有null值作为element的任何路由，我需要禁用它。是否有一种方法可以做到这一点，而不是删除具有null值作为element的路由？
英文:
I have a route set up for a menu
import React from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';
import { SalesOverviewNewPage } from "./inner-components";
export const DashboardPage = (props) => {
return (
<div className="flexRow full p-0 m-0">
<div className='full-flex flexCol width100 p-0 m-0'>
<Routes>
<Route path="/" element={<Navigate replace to="sales-overview-new" />} />
<Route path="/sales-overview-new" element={<SalesOverviewNewPage />} />
<Route path="/devices-overview" element={null} />
<Route path="/perfomance" element={null} />
<Route path="/sales-datewise" element={null} />
<Route path="/top-items-more" element={null} />
</Routes>
</div>
</div>
)
}
i need to make the menu items which doesn't have a component available to be still present in the submenu but to become disabled sort of based on a condition which isa always same.In the above code for which ever route that has null value as element i need to disable it. Is there a way to do this instead of removing the routes which has null value as elements.
答案1
得分: 0
以下是已翻译的内容：
创建一个路由对象，并在DashboardPage和Navigation两个地方使用它是一个简单的解决方案。
创建路由对象，如下所示：
const routes = [
{
text: '', //这将是链接文本
component: <Navigate replace to="sales-overview-new" />, // 或者保持为null
path: '/',
},
{
text: '销售概览新版', //这将是链接文本
component: <SalesOverviewNewPage />, // 或者保持为null
path: '/sales-overview-new',
},
{
text: '销售概览新版', //这将是链接文本
component: null, // 或者保持为null
path: '/sales-overview-new',
}
]
然后，在DashboardPage中导入这些路由，并创建如下所示的Routes：
<Routes>
routes.map(route => (
// 我使用routes.path作为键，因为大多数情况下它将是唯一的，您可以使用索引或其他任何值。
<Route key={route.path} path={route.path} element={route.component} />
));
</Routes>
接下来，在呈现链接时导入并使用相同的路由对象：
<nav>
routes.map(route => (
route.component !== null ?
// 正常链接 :
// 禁用链接
));
</nav>
根据您的需求修改和样式化禁用链接和正常链接。
英文:
A simple solution is to create a route object and use it in both places DashboardPage and Navigation.
Create an object of your routes like below:
const routes = [
{
text: '', //this will be the link text
component: <Navigate replace to="sales-overview-new" />, // Or keep this null
path: '/',
},
{
text: 'Sales Overview New', //this will be the link text
component: <SalesOverviewNewPage />, // Or keep this null
path: '/sales-overview-new',
},
{
text: 'Sales Overview New', //this will be the link text
component: null, // Or keep this null
path: '/sales-overview-new',
}
]
Next, import these routes in the DashboardPage and create Routes like this:
<Routes>
routes.map(route => (
//I am using the key as routes.path as most of the times it will be unique, you can use index or any other value.
<Route key={routes.path} path={routes.path} element={routes.component} />
));
</Routes>
Then, import and use the same routes object while rendering the links:
<nav>
routes.map(route => (
route.component !== null ?
//Normal link :
//Disabled link
));
</nav>
Modify and style disabled link and normal links as per your requirements.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论