[React]Router v 6-特定のコンポーネントを非表示にする(ログインページからNavBarを削除する)

React Router V 6で紹介されているOutletは、ネストされたルータの管理をより容易にします.以下の2つのケースを例としてまとめた.

の特定ページで、タイトル(NavBar)を非表示にしたいと思います.

サブルーティングを組み合わせて、トップレベルのルーティングで管理したいです.

例1。ログインページからNavBarを削除

NavBar Routeでは、以下に示すように、NavBarが表示しなければならない要素をサブRouteに入れます.
(App.js)

function App() {
  return (
    <div className="App">
      <Router>
        <Routes>
          <Route element={ <NavBar /> }>
            // NavBar가 보여야 하는 페이지
            <Route path="/" element={ <LandingPage /> } />
          </Route>
          
          // NavBar를 숨겨야 하는 페이지
          <Route path="/login" element={ <LoginPage /> } />
          <Route path="/register" element={ <RegisterPage /> } />
          <Route path="*" element={ <NotFound /> } />
        </Routes>
      </Router>
    </div>
  );
}

export default App;

NavBar素子からOutletを導入し、底部に<Outlet />を入れる.
(NavBar.js)

import { Outlet } from "react-router";

const NavBar = () => {
  return (
    <>
      <section className="navbar">
        ...
      </section>
      <Outlet />
    </>
  )
};

export default NavBar;

OutletはさっきのNavBarrouteのサブルーティング集合と考えられる.(NavBarが表示しなければならないページ)
これで終わりです.ログインページにNavBarが表示され、ログインページや会員ログインページには表示されません.
HTML構造もチェックしてみます.

また、親サブアセンブリ間でPropsを渡す形式を<Outlet />に適用すると、エラーが発生します.
propsを転送するにはContextしか使えません.(注:https://stackoverflow.com/questions/63765196/pass-props-to-outlet-in-react-router-v6/70376644)

import { Outlet } from "react-router";

const name = "철수";

const NavBar = () => {
  return (
    <>
      <section className="navbar">
        ...
      </section>
      // 이러한 props 전달은 에러가 뜬다.
      <Outlet name={ name }/>
    </>
  )
};

export default NavBar;

例2。最上位ルータからのユーザー関連ページの管理(サブパスの作成)

ユーザー関連のサブコンポーネントを最上位レベルで管理する場合は、次のコードを記述します.
(App.js)

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={ <LandingPage /> } />
        
        // User 관련 페이지 묶음
        <Route path='/user' element={<User />} >
          <Route path=':userId' element={<UserDetail />} />
        </Route>
        
        <Route path="*" element={ <NotFound /> } />
      </Routes>
    </div>
  )
}

NavBarとは異なり、親ルータのパスも指定されます.これで何が起こるの?
(User.js)

import { Outlet } from "react-router";

const User = () => {
  return (
    <>
      <Outlet />
    </>
  )
}

export default User;

前述したように,コード作成後,ユーザIDに応じて異なるページを表示することができる.
トップルータにもpathが指定されており、ページのパスは/user/userIdです.
User.jsには具体的な内容はありませんが、ここではサブルータを統合管理することができます.この方法は、プライマリ・サブディレクトリ・フォーマットを作成する場合にも使用できます.
HTML構造は以下の通りです.

User.サブルータはjsの要素で包むこともできます.
(User.js)

import { Outlet } from "react-router";

const User = () => {
  return (
    <section className="user">
      <Outlet />
    </section>
  )
}

export default User

User.jsでは<section>エリマンで<Outlet />を包み、出力は以下の通りである.