728x90
App.js
import { BrowserRouter, Routes, Route } from "react-router-dom";
import "./App.css";
import Home from "./Page/Home";
import Login from "./Page/Login";
import SignUp from "./Page/SignUp";
import Todo from "./Page/Todo";
function App() {
return (
<>
<BrowserRouter>
<Routes>
<Route path="/" element={<Home />}></Route>
<Route path="/login" element={<Login />}></Route>
<Route path="/signup" element={<SignUp />}></Route>
<Route path="/todo" element={<Todo />}></Route>
</Routes>
</BrowserRouter>
</>
);
}
export default App;
Login.js
import styled from "styled-components";
const Body = styled.div`
border: 5px solid red;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
`;
const Container = styled.div`
width: 350px;
height: 500px;
border: 5px solid blue;
`;
function Login() {
return (
<div>
<Body>
<Container></Container>
</Body>
</div>
);
}
export default Login;728x90
'부트캠프교육중 > react' 카테고리의 다른 글
| [todolist]수정기능 구현중2 (0) | 2023.06.17 |
|---|---|
| [todolist] 수정기능 구현 중 막히는부분 (0) | 2023.06.17 |
| 코드분할, lazy, suspense (0) | 2023.03.25 |
| Custom Hook 실습 (0) | 2023.03.23 |
| Custom Hooks (0) | 2023.03.23 |