I am currently in the process of developing a multi-page website and faced with the challenge of applying different CSS styles to the body based on the specific page.
My approach involves using react-router-dom for handling routing, and my file structure is organized as follows:
Main.js
import React from 'react';
import { Routes, Route } from 'react-router-dom';
// Additional imports for individual pages go here
const Main = () => {
return (
<Routes>
<Route exact path="/" element={<MyPage />}></Route>
<Route exact path="/another" element={<AnotherPage />}></Route>
</Routes>
);
}
export default Main;
App.js
import './App.css';
import Main from './Main';
const App = () => {
return (
<div className="App">
<Main />
</div>
);
}
export default App;
index.js
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<BrowserRouter>
<App />
</BrowserRouter>
);