React Router v6 でさまざまなレイアウトをレンダリングするにはどうすればよいですか?-jsチュートリアル-php.cn

React Router v6 でさまざまなレイアウトをレンダリングするにはどうすればよいですか?

Susan Sarandon

リリース： 2024-12-25 13:43:09

オリジナル

809 人が閲覧しました

How to Render Different Layouts in React Router v6?

React Router v6 を使用した異なるレイアウト/要素を持つコンポーネントのレンダリング

React Router v6 では、異なるレイアウトや要素を持つコンポーネントのレンダリングを実現できますネストされたルートまたは useRoutes によるルート構成を使用するフック。

ネストされたルート

をレンダリングするには<サイドバー>ログインルートを除くすべてのルート上のコンポーネントを作成するには、それらをレンダリングするレイアウトコンポーネントと、ネストされたルートのアウトレットを作成します。、ルート設定と useRoutes フックを使用して、ルート:

const AppLayout = () => (
  <>
    <NavBar />
    <SideBar />
    <main className={styles["main--container"]}>
      <div className={styles["main--content"]}>
        <Outlet />
      </div>
    </main>
  </>
);
 
const App = () => {
  return (
    <>
      <Routes>
        <Route path="/login" element={<LoginPage />} />
        <Route element={<AppLayout />}>
          <Route path="/" element={<Dashboard />} />
        </Route>
      </Routes>
    </>
  );
};

ログイン後にコピー

ルート設定とデータルーター (v6.4.0 のみ)

React Router v6.4.0 以降、データルーターを使用して定義することもできます。あなたのルート:

const routesConfig = [
  {
    path: "/login",
    element: <LoginPage />,
  },
  {
    element: <AppLayout />,
    children: [
      {
        path: "/",
        element: <Dashboard />,
      },
    ],
  },
];
 
import { useRoutes } from 'react-router-dom';
 
const App = () => {
  const routes = useRoutes(routesConfig);
 
  return routes;
};