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사용하는게 편리하겠다.