Main content wrapper best practices-CodePudding

I want to create a main content wrapper so I don't have to add classes to each component separately, I use tailwindCSS. It is just a couple of classes, mainly to give the content a margin, a max width and keep it centered.

I put a couple of divs encompasing the routes, but I don't know if this is considered a good practise.

Here is my App.jsx

import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

// pages
import Navbar from './Navbar';
import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {


  return (
    <Router>
      <div className='font-mono'>
        <Navbar />
        <div className='flex justify-center'>
          <div className='m-10 lg:max-w-4xl'>
          <Routes>
            <Route path='/' element={<Home />}/>
            <Route path='/about' element={<About />} />
            <Route path='/contact' element={<Contact />} />
          </Routes>
          </div>
        </div>
      </div>
    </Router>
  );
}

export default App;

CodePudding user response：

Yeah I imagine this is pretty common. I typically abstract it in a separate component.

/components/container/Container.js

export default function Container({ children }) {
  return (
    <div className='flex justify-center'>
      <div className='m-10 lg:max-w-4xl'>{children}</div>
    </div>
  );
}

You can then import it and use it wherever you'd like. In the case of wrapping your routes I suppose you won't be reusing it elsewhere, but it does still remove some visual noise and keep things a little organized.

/App.js

import Container from './components/container/Container';

function App() {
  return (
    <Container>
      <Router>
        <Routes>
          <Route path='/' element={<Home />}/>
          <Route path='/about' element={<About />} />
          <Route path='/contact' element={<Contact />} />
        </Routes>
      </Router>
    </Container>
  );
}