单击链接加载组件

Posted 2023-02-22

【中文标题】单击链接加载组件

【英文标题】：Load a component on click of a link

【发布时间】：2021-06-11 04:17:47

【问题描述】：

当点击 div 左列的链接时，如何在 div 列中加载特定组件。

【问题讨论】：

我只是在这种情况下使用tabs。它有 mountOnEnter 之类的道具（延迟加载概念）。

你能告诉我怎么做吗？

安装引导程序和反应引导程序，即关注getting started。花点时间熟悉这个库。尝试几个组件here。然后，尝试tabs。你会明白的。有例子/代码。如果我要写一个答案，我将不得不从文档中复制和粘贴。因此，您可以简单地阅读文档。您可以尝试（参考文档），当您遇到问题（在代码中）时，编辑您的问题，我们可以提供帮助。

您是否正在寻找像this 这样的“导航面板”？如果是，您可以将左侧的每个项目设为 react-router-dom 的“链接”。也检查this。

@AjeetShah，我使用 react-bootstrap 选项卡完成了我的任务。谢谢...是否可以使用来自 react-router-dom 的链接来实现与我最初这样做但卡住的相同的事情。

【参考方案1】：

试试这个。请注意，要确保内联样式在引用方面是正确的

import  BrowserRouter, Link, Route, Switch  from 'react-router-dom'

const app = () => 
  return(
  <>
    <div style=float:left>
       <Link to="/A">Link A </Link>
       <Link to="/B">Link B </Link>
       <Link to="/C">Link C </Link>
       <Link to="/D">Link D </Link>
       <Link to="/E">Link E </Link>
    </div>
    <div style=float:right>
       <BrowserRouter>
           <Switch>
               <Route exact path=["/","/A"] component=ComponentA/>
               <Route exact path="/B" component=ComponentB/>
               <Route exact path="/C" component=ComponentC/>
               <Route exact path="/D" component=ComponentD/>
               <Route exact path="/E" component=ComponentE/>
           </Switch>
       </BrowserRouter>
    </div>
  </>
  )

【参考方案2】：

App.jsx

import React from 'react'
import  BrowserRouter, Link, Route, Switch  from 'react-router-dom'
import Admin from './components/Admin'

const App = () => 
    return (
        <>
            <BrowserRouter>
                <Switch>
                    <Route path="/" exact component=Admin />
                </Switch>
            </BrowserRouter>
        </>
    )


export default App

Admin.jsx

import React from 'react'
import  Tab  from 'react-bootstrap'
import LeftSide from './LeftSide'
import RightSide from './RightSide'
const Admin = () => 
    return (
    <>
      <div className="container-fluid ">
        <div className="row">
          
          <div className="col-6 offset-3 bg-dark mt-4 py-4">
            <div className="row">
            <Tab.Container id="left-tabs-example" defaultActiveKey="first">
              <div className="col-3 bg-success"><LeftSide/></div>
              <div className="col-9 bg-success"><RightSide/></div> 
              </Tab.Container>
            </div>
          </div>
        </div>
        </div> 
    </>
   )


export default Admin

LeftSide.jsx

import React from 'react'
import  Nav  from 'react-bootstrap'

const LeftSide = () => 
    return (
     <>
     <div>
             <Nav variant="pills" className="flex-column text-center">
                    <Nav.Item>
                        <Nav.Link eventKey="first">Add category</Nav.Link>
                    </Nav.Item>
                    <Nav.Item>
                        <Nav.Link eventKey="second">Add user</Nav.Link>
                    </Nav.Item>
                </Nav>
                 </div>   
    </>
   )


export default LeftSide

RightSide.jsx

import React from 'react'
import  TabContent, TabPane  from 'react-bootstrap'
import Hello1 from './Hello1'
import Hello2 from './Hello2'

const RightSide = () => 
  return (
    <>
       <TabContent>
            <TabPane eventKey="first">
                <Hello1 />
            </TabPane>
            <TabPane eventKey="second">
                <Hello2 />
            </TabPane>
        </TabContent> 
    </>
  )


export default RightSide

Hello1.jsx

import React from 'react'

const Hello1 = () => 
  return (
    <div>
        <h4 className="text-default text-center">Add category form here</h4>
    </div>
  )


export default Hello1

Hello2.jsx

import React from 'react'

const Hello2 = () => 
   return (
     <div>
        <h4 className="text-default text-center">Add user form here</h4>
     </div>
   )


export default Hello2

【讨论】：

在看到您的 html 设计后，我可以判断您是否需要选项卡或导航面板。从 HTML 设计（或线框图）中，我们可以猜测选择哪一个。