所以,我正在创建一个带有下拉菜单的侧边栏,但我不知道如何为我的子菜单创建显示页面或填充页面。
这是我的示例数据文件
const dropdownData = [
{
title: "Data',
path: '/data',
dropdownItems: [
{
title: 'Sub Data',
path: '/data/subdata',
},
{
title: 'Sub Data 2',
path: '/data/subdata2',
},
]
}
所以在我的 App.js 中,我通常只对一页执行此操作
<Router>
<Sidebar />
<Switch>
<Route path='/data' component={Data} />
</Switch>
</Router>
然后我创建一个带有 Data.js 页面的 pages 文件夹,并只显示如下所示的填充文本
import React from 'react';
function Data() {
return (
<div className='data'>
<h1>Data Page</h1>
</div>
);
}
export default Data;
所以,如果我点击数据菜单链接,它只会显示"Data page"
在屏幕上。
但我想不通的是,如何为子菜单显示“假”预览页面?
理想情况下,页面上写着 "This is the sub data page"
我见过使用的例子,:id
但我不知道如何在视觉上显示它?
<Route path='/data/:id' component={Data} />
如果它链接到我的数据页面,我不明白这将如何生成一个新页面?
现在我只是链接到我的路径
<Link to={item.path}>
在 URL 上,当我单击我的子菜单时,它会显示数据/子数据,但我不知道如何创建子菜单数据页面并在我的屏幕上实际显示它?