[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>‌</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]
لینک منبع
