Notice
Recent Posts
Recent Comments
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
Tags
- GIT
- IntelliJ
- tomcat
- JavaScript
- mapreduce
- SSL
- SPC
- window
- 보조정렬
- 공정능력
- Kotlin
- table
- xPlatform
- hadoop
- R
- mybatis
- Eclipse
- NPM
- Java
- es6
- Android
- Spring
- Sqoop
- react
- plugin
- Express
- MSSQL
- SQL
- vaadin
- Python
Archives
- Today
- Total
DBILITY
react router v6 본문
반응형
package 설치부터 대충 정리해 보자.
PS C:\Dev64\workspace\project> npm install react-router-dom@6.2.1
PS C:\Dev64\workspace\project> npm ls
project@0.1.0 C:\Dev64\workspace\project
+-- @testing-library/jest-dom@5.16.2
+-- @testing-library/react@12.1.2
+-- @testing-library/user-event@13.5.0
+-- bootstrap@4.6.0
+-- react-bootstrap@1.6.4
+-- react-dom@17.0.2
+-- react-redux@7.2.6
+-- react-router-dom@6.2.1
+-- react-scripts@5.0.0
+-- react@17.0.2
+-- redux@4.1.2
`-- web-vitals@2.1.4
index.js가 아닌 App.js에 react-router-dom을 import하고 Router를 설정한다. 다음은 그냥 참고하자.
/* eslint-disable */
import 'bootstrap/dist/css/bootstrap.min.css';
import logo from './logo.svg';
import './App.css';
import {Container, Nav, Navbar, NavDropdown} from "react-bootstrap";
import {BrowserRouter as Router, Routes, Route, Link} from "react-router-dom";
import Rooms from "./components/Rooms";
function App() {
return (
<div className="App">
<Router>
<Container>
<Navbar bg="dark" expand="lg" variant={'dark'} collapseOnSelect>
<Navbar.Brand href="#home"><img
alt=""
src={logo}
width="30"
height="30"
className="d-inline-block align-top"
/>{' '}real estate</Navbar.Brand>
<Navbar.Toggle aria-controls="basic-navbar-nav"/>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link as={Link} to="/" eventKey={1}>Home</Nav.Link>
<Nav.Link as={Link} to="/rooms" eventKey={2}>Rooms</Nav.Link>
<Nav.Link as={Link} to="/help" eventKey={3}>Help</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
<Routes>
<Route path={'/'} element={<Rooms />} />
<Route path={'/rooms'} element={<Rooms />} />
<Route path={'/help'} element={
<>
Help
</>
} />
</Routes>
</Container>
</Router>
</div>
);
}
export default App;
직접 해 봐도 계속 사용하지 않으면 기억이 나지 않는다. 정리!!
Navbar 선택 후 자동으로 닫히게 하는 건 collapseOnSelect
참고로 콤포넌트를 작성할때 js파일 생성 후 intellij에선 rsf라고 입력하면 기본코드를 작성해 준다.
Route path param을 /detail/:id 형태로 작성했을때 분명 js로 한건 useParam hook을 객체구조분해로 id값을 받을 수 있었다.
<h4><Link to={`/detail/${id}`}>링크</Link></h4>
아래처럼 해보면 useParams에 Generic을 썼다.객체구조분해 시 type이 string | undefined가 나온다.
undefined 처리를 해주는게 좋겠다. 또는 type assertion으로 하면 되기는 한다.
type DetailParams = {
id: string
}
interface ItemProps {
items: DataInterface[];
}
const DetailComponent = (): JSX.Element => {
const {id} = useParams<DetailParams>();
//const {id} = useParams() as DetailParams;
console.log(id);
return (
<></>
)
}
useNavigate hook으로 navigation이 사용 navigate(-1) backward, navigate('URL') 등 가능하다.
useLocation hook으로 현재경로정보를 추출 할 수 있다.
Outlet은 nested routes 안의 element를 보여주는 위치다. 이걸 이용하면 공통 layout사용하는게 편리하겠다.
반응형
'front-end & ui > react' 카테고리의 다른 글
react react-icons (0) | 2022.02.15 |
---|---|
react react-redux (0) | 2022.02.15 |
react qrcode modern-react-qr-reader (0) | 2022.02.08 |
react localhost secure http test environment configuration (0) | 2022.01.26 |
react qr-reader v17 (0) | 2022.01.23 |
Comments