2

How can I load a particular component inside my div column when a link is cliked on left column of div.

Click here to get image of a problem

Ajeet Shah
  • 18,551
  • 8
  • 57
  • 87
Deepanshu Singh
  • 29
  • 3
  • 2
    I simply use [tabs](https://react-bootstrap.github.io/components/tabs/#tabs-custom-layout) in such cases. It has props like `mountOnEnter` (lazy loading concept). – Ajeet Shah Mar 13 '21 at 09:28
  • Can you please tell, how to do it ? – Deepanshu Singh Mar 13 '21 at 09:43
  • Install bootstrap and react-bootstrap i.e. follow [getting started](https://react-bootstrap.github.io/getting-started/introduction). Take time to familiarize yourself with this library. Try few components [here](https://react-bootstrap.github.io/components/alerts/). Then, try [tabs](https://react-bootstrap.github.io/components/tabs/). You will understand it. There are examples / code. I will have to copy and paste from the docs if I am going to write an answer. So, you can simply read the docs. You can try (refer docs), when and if you face issue (in code), edit your question, we can help. – Ajeet Shah Mar 13 '21 at 09:46
  • You probably want to check react router doc to see how they handle links dynamicly without rerender part of components on page. I don't think this is tab problem. If so, it has nothing to do with React. I believe the OP is asking what is a SPA to be honest. Hence the "global" Navbar remains the same when url is changing. – Yunhai Mar 13 '21 at 10:33
  • 1
    Are you looking for "Navigation Panel" like [this](https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_fixed)? If yes, you can make each item on left a "Link" from react-router-dom. Check [this](https://reactrouter.com/web/example/basic) as well. – Ajeet Shah Mar 13 '21 at 10:38
  • 1
    @AjeetShah, I Achieved my task using tabs of react-bootstrap. Thanks... Is it possible to achieve the same thing using Link from react-router-dom as i initially did this but got stuck. – Deepanshu Singh Mar 13 '21 at 11:34
  • React Router vs Tabs? You need to think of the "concept" here. What are you trying to achieve? Is it navigation panel? Navigation Panel = Clicking on item changes the URL and loads a component (anywhere, it may be on right side too). Tabs = If you already at a route and clicking on items don't change route but only loads Component somewhere (it maybe on right side too). – Ajeet Shah Mar 13 '21 at 12:11
  • [This is vertival Tab](https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_vertical_tabs) and [This is navigation Panel](https://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_fixed). Use "bootstrap" for tabs. Use react-router for Navigation Panel. – Ajeet Shah Mar 13 '21 at 12:11

2 Answers2

0

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
Deepanshu Singh
  • 29
  • 3
  • I can tell if you need Tabs or Navigation panel after seeing your HTML design. From HTML design (or wireframe), we can guess which one to choose. – Ajeet Shah Mar 13 '21 at 12:13
0

Try this. Note that to make sure inline styling is correct in terms of quoting

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>
  </>
  )
}
Thiluxan
  • 177
  • 4
  • 13