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

npm create refine-app@latest refine-setup

npm create refine-app@latest refine-setup

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 />
          }
        ]
      }}
    />
  );
}

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.

Need help with routerprovider

Similar Threads

Similar Threads

Similar Threads