[React] Router v6

 

모든 <Switch>요소를 <Routes>로 업그레이드 

Switch가 사라지고 

대신에 Routes가 생김.

 

useHistory대신에 useNavigate가 생김.

모두 대체 가능함.

 

History.push("/")대신 그냥 navigate("/")써주면 됨.

navigate(-1) = history.goback();

navigate(-2) = history.go(-2);

 

useRouteMatch가 사라짐 대신에 상대 경로를 쓸 수 있게 함.

<Link to =">

</Link>

하면 현재 매치된 경로를 사용할 수 있게 됨.

/를 사용하면 해당경로로 넘어가기 때문에 / 빼고 쓴다.

 

Route에 children이나 component 대신에 element사용

<Route path="/" exact component={Home} />

대신에 

<Route path="/" element={Home} />

exact도 더이상 사용할 수 없다.

<Route path="/home" exact component={Home} />

<Route path="/home/*" element={Home} />

별표표시 해주면 된다.

 

Optional URL 파라미터도 사라졌다.

필요하면 Route 2개를 만들어야 함.

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

 

 

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

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

 

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

 <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="users" element={<Users />}>
          <Route path="me" element={<OwnUserProfile />} />
          <Route path=":id" element={<UserProfile />} />
        </Route>
      </Routes>
    </BrowserRouter>
    
    function Users() {
  return (
    <div>
      <nav>
        <Link to="me">My Profile</Link>
      </nav>

      <Outlet />
    </div>
  );
}

 

NavLink에 activeStyle, activeClass가 사라짐

 

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


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

 

React.lazy()사용법

const Dashboard = React.lazy(() => import("./pages/Dashboard"));

 

 

https://reactrouter.com/docs/en/v6/upgrading/v5

React Router | Upgrading from v5