React V6 Update_React

v6 업데이트 npm install react-router-dom --save

1) Switch -> Routes

• Routes는 기존 Switch 처럼 경로를 순서를 기준으로 선택하는 것이 아닌, 가장 일치하는 라우트를 기반으로 선택하게 된다.
• v5 Route는 꼭 Switch 안에 없어도 됐지만, v6의 Route는 Routes의 직속 자식이어야 함
• BrowserRouter 추가
• Routes -> Switch 변경
• exact -> 삭제, exact가 기본으로 되어있음
• component -> element 변경
• {login} -> {} 변경

v5

<Router>
  <Switch>
    <Route exact path="/login" component={ Login } />
      <LoginPage />
  </Switch>
</Router>

v6

<BrowserRouter>
   <Routes>
      <Route path="/login" element={<Login />} />
      <Route path="/loginPage" element={<LoginPage />} />
    </Routes>
 </BrowserRouter>

2) 서브 경로가 필요한 경우 path에 * 사용

v5

<Route path="/users/:username" component={UsersPage} />

v6

<Route path="/users/:username/*" element={<UsersPage />} />

3) Optional URL 파라미터 사라짐, 필요하면 Route 2개 생성

v5

<Route path="/optional/:value?" component={Optional} />

v6

<Route path="/optional/:value?" element={<Optional />} />
<Route path="/optional" element={<Optional />} />

4) 서브 라우트를 구현하는 또 다른 방법 Outlet

v5

//App.js

<Route path="/users/:username" component={UsersPage} />

//UserPage.js
<Route path="/users/:username" component={UserMain} />
<Route path="/users/:username/about" component={About} />

v6

//App.js
<Route path="/users/:username/*" element={<UsersPage />}>
  <Route path="" element={<UserMain />} />
  <Route path="about" element={<About />} />
</Route>

//UserPage.js
<Outlet />

5) NavLink에 activeStyle, activeClassName 사라짐

v5

<NavLink to="/messages" style={{ color: "blue"}} activeStyle={{ color: "green"}}>
    Messages
</NavLink>

<NavLink to="/messages" className="nav-link" activeClassName="activated">
    Messages
</NavLink>

v6 코드

<NavLink to="/messages" style={({ isActive }) => ({ color: isActive ? 'green' : 'blue' })}>
  Messages
</NavLink>

<NavLink to="/messages" className={({ isActive }) => "nav-link" + (isActive ? " activated" : "") }>
    Messages
</NavLink>

6) useHistory -> useNavigate

• useNavigate로 기존에 useHistory의 기능을 전부 대체 가능
• useHistory의 history는 객체였지만 useNavigate의 navigate는 함수

v5

const history = useHistory();

history.push('/');
history.goback();
history.go(-2);
history.push(`/user/${user._id}`);

v6

const navigate = useNavigate();

navigate('/');
navigate(-1);
navigate(-2);
navigate(`/user/${user._id}`);

7) useRouteMatch 삭제 -> 상대 경로 기재

• 상대 경로를 사용할 수 있게되면서 굳이 useRouteMatch를 쓸 필요가 없어짐

v5

const match = useRouteMatch();
console.log(match); // { path: '/', url: '/', isExact: true, params: {} }
<Link to={match.url} />; // 현재 url 로 이동
<Link to={`${match.url}/about`}>; // 현재 url에 /about을 붙인곳으로 이동

<Route path={match.patch} exact />
<Route path={`${match.patch}/about`} />

v6

<Link to="" />; // 이렇게 입력시 현재 페이지로 이동
<Link to="about">; // 이렇게 입력시 현재 url에 /about을 붙인 곳으로 이동 *단 about앞에 /about을 붙이게되면 진짜 /about으로 이동되니 현재 기준으로 하려면 앞에 슬래쉬를 빼줘야함

<Route path="" exact />
<Route path="about" />