ratty-blush•15mo ago

Add a home/landing page to my app

At the moment I have a logingPage added where the user can logging in and see the dashboard, I would Like to add a home page to it where I will do a landing page. How can I achieve that?

    <ColorModeContextProvider>
      <CssBaseline />
      <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
      <RefineSnackbarProvider>
        <Refine
          dataProvider={dataProvider("https://b.com/api/v1")}
          notificationProvider={notificationProvider}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          resources={[
            {
              name: "building-plans",
              list: BuildingPlan,
              show: BuildingsDetail,
              create: CreateBuildingPlan,
              edit: EditBuildingPlan,
              icon: <ArticleOutlined />,
            },
            {
              name: "employees",
              list: EmployeeList,
              create: AddEmployee,
              icon: <PeopleIcon />,
            },
            {
              name: "contracts",
              list: AllContracts,
              icon: <AddHomeWorkOutlinedIcon />,
            },
            {
              name: "my-profile",
              icon: <AccountCircleOutlined />,
              options: {
                label: "My Profile",
              },
              list: MyProfile,
            },
          ]}
          Title={Title}
          Sider={Sider}
          Layout={Layout}
          Header={Header}
          routerProvider={routerProvider}
          authProvider={authProvider}
          LoginPage={Login}
          DashboardPage={BusinessDetails}
        />
      </RefineSnackbarProvider>
    </ColorModeContextProvider>

    <ColorModeContextProvider>
      <CssBaseline />
      <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
      <RefineSnackbarProvider>
        <Refine
          dataProvider={dataProvider("https://b.com/api/v1")}
          notificationProvider={notificationProvider}
          ReadyPage={ReadyPage}
          catchAll={<ErrorComponent />}
          resources={[
            {
              name: "building-plans",
              list: BuildingPlan,
              show: BuildingsDetail,
              create: CreateBuildingPlan,
              edit: EditBuildingPlan,
              icon: <ArticleOutlined />,
            },
            {
              name: "employees",
              list: EmployeeList,
              create: AddEmployee,
              icon: <PeopleIcon />,
            },
            {
              name: "contracts",
              list: AllContracts,
              icon: <AddHomeWorkOutlinedIcon />,
            },
            {
              name: "my-profile",
              icon: <AccountCircleOutlined />,
              options: {
                label: "My Profile",
              },
              list: MyProfile,
            },
          ]}
          Title={Title}
          Sider={Sider}
          Layout={Layout}
          Header={Header}
          routerProvider={routerProvider}
          authProvider={authProvider}
          LoginPage={Login}
          DashboardPage={BusinessDetails}
        />
      </RefineSnackbarProvider>
    </ColorModeContextProvider>

3 Replies

kapa.ai•15mo ago

Hi @acidias. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To add a home page as a landing page, you can follow these steps: 1. First, wrap your <Refine> component inside the <BrowserRouter> component from react-router-dom. 2. Then, define a new route for your home page (landing page) using the <Route> component from react-router-dom. You can create a new component for your landing page, let's call it LandingPage. Here's an example of how your updated code should look like:

import { BrowserRouter, Route, Routes } from "react-router-dom";
// ... other imports

function App() {
  return (
    <ColorModeContextProvider>
      <CssBaseline />
      <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
      <RefineSnackbarProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route
              path="*"
              element={
                <Refine
                  dataProvider={dataProvider("https://b.com/api/v1")}
                  notificationProvider={notificationProvider}
                  ReadyPage={ReadyPage}
                  catchAll={<ErrorComponent />}
                  resources={[
                    // ... your resources
                  ]}
                  Title={Title}
                  Sider={Sider}
                  Layout={Layout}
                  Header={Header}
                  routerProvider={routerProvider}
                  authProvider={authProvider}
                  LoginPage={Login}
                  DashboardPage={BusinessDetails}
                />
              }
            />
          </Routes>
        </BrowserRouter>
      </RefineSnackbarProvider>
    </ColorModeContextProvider>
  );
}

import { BrowserRouter, Route, Routes } from "react-router-dom";
// ... other imports

function App() {
  return (
    <ColorModeContextProvider>
      <CssBaseline />
      <GlobalStyles styles={{ html: { WebkitFontSmoothing: "auto" } }} />
      <RefineSnackbarProvider>
        <BrowserRouter>
          <Routes>
            <Route path="/" element={<LandingPage />} />
            <Route
              path="*"
              element={
                <Refine
                  dataProvider={dataProvider("https://b.com/api/v1")}
                  notificationProvider={notificationProvider}
                  ReadyPage={ReadyPage}
                  catchAll={<ErrorComponent />}
                  resources={[
                    // ... your resources
                  ]}
                  Title={Title}
                  Sider={Sider}
                  Layout={Layout}
                  Header={Header}
                  routerProvider={routerProvider}
                  authProvider={authProvider}
                  LoginPage={Login}
                  DashboardPage={BusinessDetails}
                />
              }
            />
          </Routes>
        </BrowserRouter>
      </RefineSnackbarProvider>
    </ColorModeContextProvider>
  );
}

kapa.ai•15mo ago

In this example, we've added a new route for the LandingPage component at the root path ("/"). The <Refine> component is now wrapped inside a <Route> with a path of "*" which means it will match all other routes except the root path. Don't forget to create your LandingPage component and import it in your App component. For more information on handling routes in refine, you can refer to this extract: React Router v6 - FAQ (https://refine.dev/docs/packages/documentation/routers/react-router-v6#faq) ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

React Router v6 | refine

refine provides router bindings and utilities for React Router v6. It is built on top of the react-router-dom package. This package will provide easy integration between refine and react-router-dom for both existing projects and new projects.

kapa.ai•15mo ago

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