styled-components
번외) react-router-dom
윰윰로그
2021. 5. 17. 14:37
이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다.
🔗링크
https://www.udemy.com/course/react-styled-components/
import LogIn from "components/pages/LogIn";
import Home from "components/pages/Home";
import { createGlobalStyle } from "styled-components";
import { BrowserRouter, Switch, Route } from "react-router-dom";
const GlobalStyle = createGlobalStyle`
body{
background-color: white;
color:black;
min-height:100vh;
margin:0;
font-family: 'Kaushan Script', cursive;
}
`;
function App() {
return (
<>
<GlobalStyle />
<BrowserRouter>
<Switch>
<Route path="/login">
<LogIn />
</Route>
<Route path="/">
<Home />
</Route>
</Switch>
</BrowserRouter>
</>
);
}
export default App;
react-router-dom을 설치한 후에
BrowserRouter, Switch, Route를 import.
<GlobalStyle/> 아래에
하지만 다른 컴포넌트는 모두 감싸는 위치에 <BrowserRouter>