CODEWITHSUNDEEP
javascripthtmlreactjs
Nicolas Jativa
Nicolas Jativa

Reputation: 11

How to share common components in diferent groups of pages

I am developing a website, but I have a problem, how can I create links that connect interfaces with different components within the same website?

I am trying to create a home page with a header that contains several links that allow access to several routes that maintain the same header and footer, but that when entering a specific link a page with its own components is displayed.

Furthermore, I don't know how to use react-router-dom for this, if you can help me I can give more details internally.

function App() {
  return (
    <div className='app__page'>
      <Sidebar />   
      <Routes>
        <Route path='/' element={<Body />}/>
        <Route path='ingenieria-civil' element={<Ingcivil/>}/>
      </Routes>
    </div>

    <div className='reading__page'
        <Index />
        <Routes>
           <Route path='/estructurasmetalicas/diseñocortante' element={<Metcortante />}/>
           <Route path='/geotecnia/ensayospt' element={<Spt/>}/> 
         </Routes>
    </div>  
  )
}

The second div is not working because it shares <Sidebar /> component with those routes, but I want those routes to only share <Index /> component between them.

I was expecting to have two groups of pages with different shared components.

Upvotes: 1

Views: 50

Answers (1)

Muqtadir
Muqtadir

Reputation: 69

There is no hard and fast rule to achieve this You can take reference from this pen

https://stackblitz.com/edit/react-ts-s62wbz?file=Component/ComponentOne.tsx

Upvotes: 1

Related Questions