reactjs - 单击链接加载组件

Question

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

Answer 1

应用程序.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

管理员.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

左侧.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

你好1.jsx

import React from 'react'

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

export default Hello1

你好2.jsx

import React from 'react'

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

export default Hello2

Answer 2

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

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>
  </>
  )
}