ReactJs using CSS per page

Question

I'm using ReactJs to build a simple app with 3 routes:

"/" <- index.js
"/login" <- login.js
"/register" <- register.js

to view these pages correctly, i need to import CSS-files. But if i import the CSS-file for the "/login" route, it also gets loaded in the "/" route.

here are my files:

app.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import './App.css';
import Index from './pages/index';
import Login from './pages/login';
import './css/bootstrap.css';

class App extends Component {
  render() {
    return (
        <Router>
            <Switch>
                <Route exact path='/' component={Index} />
                <Route exact path='/login' component={Login} />
            </Switch>
        </Router>
    );
  }
}
export default App;

index.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import logo from '../logo.svg';
import '../App.css';

class Index extends Component {
    render() {
        return (
            <div className="App">
                <header className="App-header">
                    <img src={logo} className="App-logo" alt="logo" />
                    <h1 className="App-title">Welcome to React</h1>
                </header>
                <p className="App-intro">
                    To get started, edit <code>src/App.js</code> and save to reload.
                    <Link to={'/login'}>Login</Link>
                </p>
            </div>
        );
    }
}

export default Index;

and login.js

import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import '../css/login.css';
import '../css/main.css';
import logo from '../img/s900x300.png';
import back from '../img/back.svg';
import view from '../img/view.svg';

export default class Login extends Component {
    render() {

        return (

            <div>
                <script async="" src="https://www.google-analytics.com/analytics.js"></script>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

                <button className="back">
                    <a><img alt="" className="left" src={back}/></a>
                </button>

                <div className="background">
                </div>
                <div id="login" className="container login">

                    <img alt="" src={logo} />

                    <center><h5>&zwnj;</h5></center>
                    <input name="user" type="text" required placeholder="Benutzername oder Email"/>
                    <div className="password">
                        <input name="pw" required maxLength="64" type="password" placeholder="Passwort"/>
                        <button id="view_toggle">
                            <img alt="" src={view}/>
                        </button></div>
                    <form>
                        <button id="login" className="on">Login</button>
                    </form>

                    <center><b><a>back</a> | <Link to={'/register'}><a>Create account</a></Link></b></center>

                </div>

                <script src="/js/bootstrap.min.js"></script>
            </div>
        );
    }
}

for example: in my login.css want a background image for my body. but this background is also applied to "/". How can i prevent, that the css is used global? Sorry for my bad english :)

Answer 1

To avoid your issue, you can create a global css file like style.css

then you link it to your index.html

as @Chase DeAnda suggest you can establish namespace for each page.

your style.css should be something like

.login .myClass {...}
.login .anotherClass {...}
.main .myClass {...}
.main .anotherClass {...}