node.js - ReactJs using CSS per page

[ad_1]

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> 

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 :)

[ad_2]

لینک منبع