번외) react-router-dom

이 포스트는 Udemy 사이트에 올라 온 Tom Phillips의 "React styled-components v5 (2021 edition)" 강의를 듣고 정리한 것입니다.

 

🔗링크

https://www.udemy.com/course/react-styled-components/

React styled components v5 (2021 edition)

 

 

 

 

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>