like-gold•14mo ago

Setting up a home page for a resource

I have a resource called Marketplace. It'll be used to allow users to create a sort of classifieds listing, similar to Craigslist. I have the list, show, edit, and create pages working as expected but I'd also like to add a home page where we'll have maybe featured listings, etc. Currently, my sider is using useMenu() to output the resources as expected, however the Marketplace link automatically goes to the List page (/marketplace/listings) instead of the home page (/marketplace). What's the best method to assign a home page as the default? I thought that setting a route as the index would work but that does't seem to be the case. Here's my Refine component currently (I've stripped out un-needed info):

<Refine
dataProvider={dataProvider(supabaseClient)}
routerProvider={routerProvider}
resources={[
    {
        name: 'marketplaceListings',
        list: '/marketplace/listings',
        show: '/marketplace/listings/:id',
        create: '/marketplace/listings/create',
        edit: '/marketplace/listings/edit/:id',
        meta: {
            label: 'Marketplace',
        },
    },
]}
>
<Routes>
    <Route
        element={
            <Authenticated fallback={<CatchAllNavigate to='/login' />}>
                <Layout>
                    <Outlet />
                </Layout>
            </Authenticated>
        }
    >
        <Route path='marketplace'>
            <Route index element={<MarketplaceHome />} />
            <Route path='listings' element={<MarketplaceList />} />
            <Route path='listings/:id' element={<MarketplaceDetails />} />
            <Route path='listings/edit/:id' element={<MarketplaceEdit />} />
            <Route path='listings/create' element={<MarketplaceCreate />} />
        </Route>
    </Route>
</Routes>
<UnsavedChangesNotifier />
</Refine>

<Refine
dataProvider={dataProvider(supabaseClient)}
routerProvider={routerProvider}
resources={[
    {
        name: 'marketplaceListings',
        list: '/marketplace/listings',
        show: '/marketplace/listings/:id',
        create: '/marketplace/listings/create',
        edit: '/marketplace/listings/edit/:id',
        meta: {
            label: 'Marketplace',
        },
    },
]}
>
<Routes>
    <Route
        element={
            <Authenticated fallback={<CatchAllNavigate to='/login' />}>
                <Layout>
                    <Outlet />
                </Layout>
            </Authenticated>
        }
    >
        <Route path='marketplace'>
            <Route index element={<MarketplaceHome />} />
            <Route path='listings' element={<MarketplaceList />} />
            <Route path='listings/:id' element={<MarketplaceDetails />} />
            <Route path='listings/edit/:id' element={<MarketplaceEdit />} />
            <Route path='listings/create' element={<MarketplaceCreate />} />
        </Route>
    </Route>
</Routes>
<UnsavedChangesNotifier />
</Refine>

8 Replies

kapa.ai•14mo ago

Hi @h3rrpie. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're facing is due to the way the useMenu hook works. It automatically generates the menu items based on the resources you've defined in the Refine component. The name property of each resource is used to generate the URL for the menu item. In your case, the name property of your resource is marketplaceListings, so the URL for the menu item becomes /marketplaceListings, which is not what you want. To solve this issue, you can create a custom menu and use the useNavigation hook to navigate to the desired page when the menu item is clicked. Here's an example of how you can do this:

import { useNavigation } from "@pankod/refine";

const { push } = useNavigation();

<Menu>
    <Menu.Item key="marketplace" onClick={() => push("/marketplace")}>
        Marketplace
    </Menu.Item>
    {/* Other menu items */}
</Menu>

import { useNavigation } from "@pankod/refine";

const { push } = useNavigation();

<Menu>
    <Menu.Item key="marketplace" onClick={() => push("/marketplace")}>
        Marketplace
    </Menu.Item>
    {/* Other menu items */}
</Menu>

In this example, when the "Marketplace" menu item is clicked, the push function from the useNavigation hook is used to navigate to the /marketplace page. Please note that this is a workaround and might not be the best solution for your case. You might need to adjust your resource configuration or your routing setup to better suit your needs. For more information about routing in Refine, you can refer to the official documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#resources). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us how it did by reacting below

like-gold•14mo ago

@kapa.ai That doesn't seem right as it doesn't default to /marketplacelistings when clicking the menu item, it goes to /marketplace/listings. No problem though, I ended up just hiding the menu item for the resource and added it manually in my sider.

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct, the list property in the resources array of the Refine component determines the route for the resource, not the name property. In your case, the list property of your marketplaceListings resource is set to /marketplace/listings, so that's why the menu item navigates to that route. Your solution of hiding the menu item for the resource and manually adding it in your Sider is a good workaround. This allows you to have full control over the route that the menu item navigates to. Here's an example of how you can hide a resource from the menu:

<Refine
    resources={[
        {
            name: "marketplaceListings",
            list: "/marketplace/listings",
            options: { hideOnMenu: true },
            // other properties...
        },
        // other resources...
    ]}
    // other properties...
/>

<Refine
    resources={[
        {
            name: "marketplaceListings",
            list: "/marketplace/listings",
            options: { hideOnMenu: true },
            // other properties...
        },
        // other resources...
    ]}
    // other properties...
/>

And here's how you can manually add a menu item in your Sider:

import { Layout, Sider } from "@pankod/refine";

const CustomSider = () => {
    return (
        <Sider
            render={({ items, logout }) => (
                <>
                    <a href="/marketplace">Marketplace</a>
                    {items}
                    {logout}
                </>
            )}
        />
    );
};

const CustomLayout = () => {
    return <Layout Sider={CustomSider}>...</Layout>;
};

import { Layout, Sider } from "@pankod/refine";

const CustomSider = () => {
    return (
        <Sider
            render={({ items, logout }) => (
                <>
                    <a href="/marketplace">Marketplace</a>
                    {items}
                    {logout}
                </>
            )}
        />
    );
};

const CustomLayout = () => {
    return <Layout Sider={CustomSider}>...</Layout>;
};

In this example, a new menu item that navigates to /marketplace is added to the Sider. For more information, you can refer to the official documentation (https://refine.dev/docs/faq#how-can-i-add-an-item-to-the-sider-component). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us how it did by reacting below

like-gold•14mo ago

@kapa.ai The menu you provided for hiding the menu item is incorrect. It is the following:

<Refine
    resources={[
        {
            name: "marketplaceListings",
            list: "/marketplace/listings",
            meta: {
        hide: true,
        },
            // other properties...
        },
        // other resources...
    ]}
    // other properties...
/>

<Refine
    resources={[
        {
            name: "marketplaceListings",
            list: "/marketplace/listings",
            meta: {
        hide: true,
        },
            // other properties...
        },
        // other resources...
    ]}
    // other properties...
/>

kapa.ai•14mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- I apologize for the confusion. You're correct. The hide property should be inside the meta object of the resource. Here's the correct way to hide a resource from the menu:

<Refine
    resources={[
        {
            name: "marketplaceListings",
            list: "/marketplace/listings",
            meta: {
                hide: true,
            },
            // other properties...
        },
        // other resources...
    ]}
    // other properties...
/>

<Refine
    resources={[
        {
            name: "marketplaceListings",
            list: "/marketplace/listings",
            meta: {
                hide: true,
            },
            // other properties...
        },
        // other resources...
    ]}
    // other properties...
/>

This will hide the marketplaceListings resource from the menu. Thank you for pointing out the mistake. For more information, you can refer to the official documentation (https://refine.dev/docs/api-reference/core/components/refine-config/#resources-meta-hide). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•14mo ago

<@204362818592440323> kapa.ai is still learning and improving, please let us how it did by reacting below