sharp-indigo•2y ago

Need help with routerprovider

Hey all, I was trying to create a new project with refine with the basic CRA scheme, and am facing an issue where I can't add custom pages to the routerprovider. Basically, when I add the '/' path to the element 'LandingPage', it does not show the said element at that path. Steps to reproduce the error: 1) Create a refine app using, npm create refine-app@latest refine-setup 2) Without making any changes to the generated boilerplate, go to App.tsx and modify the routerProvider attribute of the Refine component as said in the documentation.

import React from "react";

import { Refine } from "@pankod/refine-core";

import dataProvider from "@pankod/refine-simple-rest";
import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";
import routerProvider from "@pankod/refine-react-router-v6";

function App() {
  const LandingPage = () => {
    return (
      <div>
        <h1>Refine</h1>
        <p>Headless Inferencer</p>
      </div>
    );
  }

  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      // resources={[
      //   {
      //     name: "posts",
      //     list: HeadlessInferencer,
      //     edit: HeadlessInferencer,
      //     show: HeadlessInferencer,
      //     create: HeadlessInferencer,
      //     canDelete: true,
      //   },
      // ]}
      routerProvider={{
        ...routerProvider,
        routes: [
          {
            path: '/',
            element: <LandingPage />
          }
        ]
      }}
    />
  );
}

import React from "react";

import { Refine } from "@pankod/refine-core";

import dataProvider from "@pankod/refine-simple-rest";
import { HeadlessInferencer } from "@pankod/refine-inferencer/headless";
import routerProvider from "@pankod/refine-react-router-v6";

function App() {
  const LandingPage = () => {
    return (
      <div>
        <h1>Refine</h1>
        <p>Headless Inferencer</p>
      </div>
    );
  }

  return (
    <Refine
      dataProvider={dataProvider("https://api.fake-rest.refine.dev")}
      // resources={[
      //   {
      //     name: "posts",
      //     list: HeadlessInferencer,
      //     edit: HeadlessInferencer,
      //     show: HeadlessInferencer,
      //     create: HeadlessInferencer,
      //     canDelete: true,
      //   },
      // ]}
      routerProvider={{
        ...routerProvider,
        routes: [
          {
            path: '/',
            element: <LandingPage />
          }
        ]
      }}
    />
  );
}

And, the LandingPage component does NOT appear on the '/' path. Please help me resolve this issue, and feel free to ask for the project configuration required to debug it.

2 Replies

national-gold•2y ago

Hey @hasnain-cyber, / route is also used by refine, you can pass DashboardPage prop to render your page in /, check out this https://refine.dev/docs/api-reference/core/components/refine-config/#dashboardpage Btw, the page you're seeing is the WelcomePage which is rendered because there are no resources defined

sharp-indigoOP•2y ago

Ohh, thanks a lot, it worked 😌😌