How to create move page Button?

When the button is clicked app/brands/products/[id] You need to go to the location.

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'id',
        headerName: '번호',
        type: 'number',
        minWidth: 70,
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'brand_name',
        headerName: '브랜드',
        type: 'string',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <>
              <Button
                variant="contained"
                color="primary"
                onClick={() => {
                  router.push(`/products?mall_id=${row.brand_name}`);
                }}
              >
                상품 목록
              </Button>
            </>
          );
        },
      },
    ],
    [],
  );

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const columns = React.useMemo<GridColDef[]>(
    () => [
      {
        field: 'id',
        headerName: '번호',
        type: 'number',
        minWidth: 70,
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'brand_name',
        headerName: '브랜드',
        type: 'string',
        align: 'left',
        headerAlign: 'left',
      },
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <>
              <Button
                variant="contained"
                color="primary"
                onClick={() => {
                  router.push(`/products?mall_id=${row.brand_name}`);
                }}
              >
                상품 목록
              </Button>
            </>
          );
        },
      },
    ],
    [],
  );

5 Replies

kapa.ai•3w ago

Hi @florent. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To create a button that navigates to the app/brands/products/[id] page when clicked, you can use the useNavigation hook from refine. Here's how you can modify your code to achieve this:

import { useNavigation } from "@refinedev/core";
import { Button } from "@mui/material";

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const { show } = useNavigation();

  const columns = React.useMemo<GridColDef[]>(
    () => [
      // ... other columns
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                show("products", row.id);
              }}
            >
              상품 목록
            </Button>
          );
        },
      },
    ],
    [show],
  );

  // ... rest of your component
}

import { useNavigation } from "@refinedev/core";
import { Button } from "@mui/material";

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const { show } = useNavigation();

  const columns = React.useMemo<GridColDef[]>(
    () => [
      // ... other columns
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                show("products", row.id);
              }}
            >
              상품 목록
            </Button>
          );
        },
      },
    ],
    [show],
  );

  // ... rest of your component
}

In this modified code: 1. We import the useNavigation hook from @refinedev/core. 2. We destructure the show method from useNavigation(). 3. In the onClick handler of the Button, we use show("products", row.id) to navigate to the show page of the "products" resource with the specific id. This approach assumes that you have set up your resources and routes correctly in your Refine configuration. The show method will automatically construct the correct URL based on your routing configuration. If you need more control over the exact URL, you can use the go method from useNavigation instead:

const { go } = useNavigation();
// In the onClick handler:
onClick={() => {
  go({
    to: `/brands/products/${row.id}`,
    type: "push",
  });
}}

const { go } = useNavigation();
// In the onClick handler:
onClick={() => {
  go({
    to: `/brands/products/${row.id}`,
    type: "push",
  });
}}

This will give you more flexibility in specifying the exact URL structure. For more details on navigation in refine, you can refer to the useNavigation documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1184365192482652173> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

rival-blackOP•3w ago

@kapa.ai When I click the button at http://localhost:3102/brands You should move as shown below. http://localhost:3102/brands/products?mall_id=natureclass

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To navigate to the specific URL <http://localhost:3102/brands/products?mall_id=natureclass> when clicking the button on the brands page, you can use the useNavigation hook from refine. Here's how you can modify your code to achieve this:

import { useNavigation } from "@refinedev/core";
import { Button } from "@mui/material";

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const { go } = useNavigation();

  const columns = React.useMemo<GridColDef[]>(
    () => [
      // ... other columns
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                go({
                  to: `/brands/products?mall_id=${row.brand_name}`,
                  type: "push",
                });
              }}
            >
              상품 목록
            </Button>
          );
        },
      },
    ],
    [go],
  );

  // ... rest of your component
}

import { useNavigation } from "@refinedev/core";
import { Button } from "@mui/material";

export default function BrandsList() {
  const { dataGridProps } = useDataGrid({
    resource: 'brands',
    syncWithLocation: true,
  });

  const { go } = useNavigation();

  const columns = React.useMemo<GridColDef[]>(
    () => [
      // ... other columns
      {
        field: 'detail',
        headerName: '상품 목록',
        align: 'right',
        headerAlign: 'right',
        minWidth: 120,
        sortable: false,
        display: 'flex',
        renderCell: function render({ row }) {
          return (
            <Button
              variant="contained"
              color="primary"
              onClick={() => {
                go({
                  to: `/brands/products?mall_id=${row.brand_name}`,
                  type: "push",
                });
              }}
            >
              상품 목록
            </Button>
          );
        },
      },
    ],
    [go],
  );

  // ... rest of your component
}

In this modified code: 1. We import the useNavigation hook from @refinedev/core. 2. We destructure the go method from useNavigation(). 3. In the onClick handler of the Button, we use the go method to navigate to the desired URL. The go method allows us to specify the exact URL we want to navigate to, including query parameters. In this case, we're constructing the URL with the mall_id query parameter set to the brand_name of the current row. This approach gives you full control over the URL structure and allows you to include query parameters as needed. For more information on using the go method and other navigation options in refine, you can refer to the useNavigation documentation. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@1184365192482652173> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

How to create move page Button?

Did you find this page helpful?