React - Route 5 --> 6

https://kyung-a.tistory.com/36

자세한 변화는 위의 글 참조

 

1. Routes

모든 Route 들은 Routes 안에 들어가야한다.

exact 기능도 없어졌다. - 알아서 url은 정확히 매칭된다.

<Routes>
  <Route path="/" element={<BucketList list={list} />}></Route>
  <Route path="/detail" exact element={<Detail />}></Route> 
</Routes>

2. useHistory() 같은건 없다 이제

대신 useNavigate()를 쓰면 된다.

import {useNavigate }  from 'react-router-dom';

const navigate = useNavigate ();
 
<ItemStyle className="list_item" key={index} onClick={() => {navigate('/detail')}}>

useNavigate() vs Link

Link는 JSX로 쓸수 있고, useNavigate()는 없다.

 

3. 잘못된 url 처리

 <Route path="/*" element={<h1>존재하지 않는 페이지입니다.</h1>} />

 

 

app.js, bucketlist.jsx

app.js

import React from "react";
// BucketList 컴포넌트를 import 해옵니다.
// import [컴포넌트 명] from [컴포넌트가 있는 파일경로];
import BucketList from "./BucketList";
import styled from "styled-components";
import {Routes, Route} from 'react-router-dom';
import Detail from "./Detail.jsx"

function App() {

  const [list, setList] = React.useState(["영화관 가기", "매일 책읽기", "수영 배우기"]);
  const text = React.useRef(null);

  const addBucketList = () => {
    // 스프레드 문법! 기억하고 계신가요? :) 
    // 원본 배열 list에 새로운 요소를 추가해주었습니다.
    setList([...list, text.current.value]);
  }
  return (
    <div className="App">
      <Container>
        <Title>내 버킷리스트</Title>
        <Line />
        {/* 컴포넌트를 넣어줍니다. */}
        {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
        <Routes>
          <Route path="/" element={<BucketList list={list} />}></Route>
          <Route path="/detail" exact element={<Detail />}></Route> 
        </Routes>
      </Container>
      {/* 인풋박스와 추가하기 버튼을 넣어줬어요. */}
      <Input>
        <input type="text" ref={text} />
        <button onClick={addBucketList}>추가하기</button>
      </Input>
    </div>
  );
}

const Input = styled.div`
  max-width: 350px;
  min-height: 10vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
`;

const Container = styled.div`
  max-width: 350px;
  min-height: 60vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
`;

const Title = styled.h1`
  color: slateblue;
  text-align: center;
`;

const Line = styled.hr`
  margin: 16px 0px;
  border: 1px dotted #ddd;
`;

export default App;

BucketList.jsx

// 리액트 패키지를 불러옵니다.
import React from "react";
import styled from "styled-components";
import {useNavigate }  from 'react-router-dom';

const BucketList = (props) => {
  console.log(props);
  const my_lists = props.list;
  const navigate = useNavigate ();
  
  return (
    <ListStyle>
      {my_lists.map((list, index) => {
        return (
          <ItemStyle className="list_item" key={index} onClick={() => {
            navigate('/detail')
          }}>
            {list}
          </ItemStyle>
        );
      })}
    </ListStyle>
  );
};

const ListStyle = styled.div`
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
`;

const ItemStyle = styled.div`
  padding: 16px;
  margin: 8px;
  background-color: aliceblue;
`;

export default BucketList;