I'm new to React, so I'm not exactly sure why this is happening. Using the React Router, I have three routes, /
, /signup
, and /login
, and the importing of css in each component spills over into the css of the other components, ruining the styling. In this case, instead of the div element word
being the color as described in each component's css, they all come out green which should only happen for the Signup component. What can I do to fix this?
App.js
import HomePage from './pages/HomePage/HomePage'
import LoginPage from './pages/LoginPage/LoginPage'
import SignupPage from './pages/SignupPage/SignupPage'
import {BrowserRouter as Router, Switch, Route} from 'react-router-dom'
function App() {
return (
<Router>
<Switch>
<Route path="/" exact component={HomePage}/>
<Route path="/signup" component={SignupPage}/>
<Route path="/login" component={HomePage}/>
</Switch>
</Router>
)
}
export default App;
LoginPage.js
import { React } from 'react'
import "./LoginPage.css"
export default function LoginPage(){
return(
//In css file, word is red, but comes out green instead
<div className="word">login</div>
)
}
SignupPage.js
import { React } from 'react'
import "./SignupPage.css"
export default function SignupPage(){
return(
//In css file, word is green
<div className="word">signup</div>
)
}
HomePage.js
import React, { useState } from 'react'
import "./HomePage.css"
export default function HomePage() {
return (
//In css file, word is hotpink, but comes out green instead
<div className="word">Home</div>
)
Is there something I need to add to my App.js file?