React Router v6 を使用してカスタマイズされたレイアウトで React コンポーネントをレンダリングするにはどうすればよいですか?

React Router v6 を使用したカスタマイズされたレイアウトでのコンポーネントのレンダリング

React では、

コンポーネントを使用すると、アプリケーションのルートを定義し、現在の URL に基づいてレンダリングするコンポーネントを指定できます。ナビゲーション要素のないカスタム レイアウトを必要とするログイン ページなど、さまざまなタイプのページを操作する場合、コンポーネントのレイアウトを制御する方法を理解する必要があります。

React Router v6 では、「」と呼ばれる概念が導入されています。ネストされたルート。」これにより、他のルートの親として使用されるレイアウト コンポーネントを作成できます。このレイアウト コンポーネントには、Navbar や Sidebar などの共有要素を含めることができます。

// AppLayout.js
import { Outlet } from 'react-router-dom';

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles['main--container']}>
      <div className={styles['main--content']}>
        <Outlet />
      </div>
    </main>
  </>
);

// App.js
import { Routes, Route } from 'react-router-dom';
import { AppLayout } from './AppLayout';
import LoginPage from './LoginPage';
import Dashboard from './Dashboard';

const App = () => {
  return (
    <>
      <Routes>
        <Route path='/login' element={<LoginPage />} />
        <Route element={<AppLayout />}>
          <Route path='/' element={<Dashboard />} />
        </Route>
      </Routes>
    </>
  );
};

これを実装するには、Navbar と Sidebar を含む AppLayout コンポーネントを作成します。次に、App コンポーネントで、AppLayout のログイン ページを除くすべてのルートをラップします。

あるいは、useRoutes フックまたは を使用することもできます。コンポーネントをデータ ルーター (v6.4.0 で導入) と併用すると、同じ結果が得られます。選択する具体的な方法は、好みとアプリケーションの要件によって異なります。

以上がReact Router v6 を使用してカスタマイズされたレイアウトで React コンポーネントをレンダリングするにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。