react如何使用react-router创建子页面以显示?

IT技术 reactjs react-router
2021-04-30 12:10:47

所以,我正在创建一个带有下拉菜单的侧边栏,但我不知道如何为我的子菜单创建显示页面或填充页面。

这是我的示例数据文件

 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 上,当我单击我的子菜单时,它会显示数据/子数据,但我不知道如何创建子菜单数据页面并在我的屏幕上实际显示它?

1个回答

您需要创建一个路由(使用<Route>)到您的子页面。您可以通过以下两种方式之一执行此操作。要么你可以创建其他的<Route>下一个S到您现有的<Route>"/data",给基础数据路径的exactprops。或者您可以在Data组件中嵌套数据子页面的路由,并拆分出一个单独的数据“主页”组件。

两者都包含相同的主要思想,但它们的组织方式不同,从长远来看,第二种方法更适合管理和扩展您的应用程序。

第一种方法

<Router>
  <Sidebar />
    <Switch>
      <Route exact path='/data' component={Data} />
      <Route path='/data/subdata' component={SubData} />
      <Route path='/data/subdata2' component={SubData2} />
    </Switch>
</Router>

第二种方法(保留顶级路由原样并更新您的Data组件,使其看起来像这样):

function Data() {
  return (
    <Switch>
      <Route exact path="/data" component={ DataHome }/>
      <Route path="/data/subdata" component={ SubData }/>
      <Route path="/data/subdata2" component={ SubData2 }/>
    </Switch>
  );
}

export default Data;


function DataHome() {
  return (
    <div className='data'>
      <h1>Data Page</h1>
    </div>
  );
}

function SubData() {}

function SubData2() {}