Currently, I am utilizing multiple CSS files for a specific purpose. The issue I am facing is that when I apply styles to one component in a CSS file, it inadvertently affects other components as well, not just the intended one.
I believe the root of this problem lies within react-router. It seems to be sharing CSS files across all components imported into it. When a component is no longer used in the router, its associated CSS files are no longer shared.
But how can I approach routes differently? I need to import all components into the router in order to have links to my pages.
I even attempted placing routes in separate files, but that did not resolve the issue either.
This is what my route file structure looks like:
import React, { Component } from 'react';
import {
BrowserRouter as Router,
Route
} from 'react-router-dom';
import './App.css';
import LoginPage from '../pages/LoginPage.js';
import Navbar from './Navbar.js';
import MainPage from '../pages/MainPage.js';
import SportsfieldsListPage from '../pages/SportsfieldsListPage.js';
import MyProfilePage from '../pages/MyProfilePage.js';
import SingleObjectPage from '../pages/SingleObjectPage.js';
import ConfirmPage from '../pages/ConfirmPage.js';
import AdminPage from '../pages/AdminPage.js';
class App extends Component {
render() {
return (
<Router>
<div className="container">
<Navbar />
<Route exact path="/" component={MainPage} />
<Route exact path="/listaBoisk" component={SportsfieldsListPage} />
<Route exact path="/LoginPage" component={LoginPage} />
<Route exact path="/MyProfilePage" component={MyProfilePage} />
<Route path="/object/:id" component={SingleObjectPage}/>
<Route path ="/confirm/:id/:value" component={ConfirmPage}/>
<Route path ="/adminPage" component={AdminPage}/>
</div>
</Router>
);
}
}
export default App;