linkToView

linkToView関数は、ビューの閲覧画面へ移動できるリンクを表示できる関数です。

基本的な使い方

ユーザーの一覧を表示するアクションの実行結果に、ユーザーの詳細を表示するビューへ移動できるリンクを表示する例を考えます。

移動先のユーザーの詳細を表示するビューは、以下のようなURLパラメーターから取得したユーザーのIDを使ってユーザー情報を取得するアクションを実行して表示するビューです。


import { Heading, Text, VStack, ButtonGroup, Button } from "@chakra-ui/react";
import { useExecuteAction, useURLQueries } from "@basemachina/view";
 
const App = () => {
  // URLパラメーターを取得
  const query = useURLQueries();
  // アクションでユーザーの詳細情報を取得
  const { data, loading } = useExecuteAction("get-user-detail", {
    // アクションのパラメーターにユーザーIDを渡す
    userID: query.userID,
  });
  if (loading) return <LoadingIndicator />;
 
  const user = data?.results[0].success;
  return (
    <VStack spacing="1rem">
      <Heading>{user.name}</Heading>
      <VStack spacing="0.5rem">
        <Text>{user.email}</Text>
        <Text>{user.createdAt}登録</Text>
      </VStack>
      <ButtonGroup spacing="2">
        <Button colorScheme="blue">編集する</Button>
        <Button colorScheme="red">削除する</Button>
      </ButtonGroup>
    </VStack>
  );
};
 
export default App;

使用例

以下がユーザーの一覧を表示するアクションに設定するスクリプトです。


const users = results[0].success;
return [
  {
    success: users.map((user) => ({
      名前: linkToView(
        user.name,
        // ユーザーの詳細を表示するビューの識別子を設定
        "get-user-detail",
        // ユーザーの詳細を表示するビューのURLパラメーターに渡す値を設定
        { userId: user.id },
      ),
      メールアドレス: user.email,
    })),
  },
];

表示結果

表示されたリンクをクリックすると、ユーザーの詳細を表示するビューのページに移動します。

詳細なインターフェース


function linkToView(title: string, viewId: string, params?: object);

引数

`title: string`

リンクとして表示するテキストです。

`viewId: string`

移動先のビューのIDまたは識別子です。
例
- "get-user-detail"
- "u8a64fnmekufv3j2om"

`params?: object`

移動先のビューに渡すURLパラメーターです。キーがパラメータ名、値がパラメータに渡す値のオブジェクトです。