rare-sapphire
rare-sapphire•6mo ago

How to configure routing for a different base url? like /admin

I'm making good progress building a stand alone admin that I'd like to be part of an app. How can the routing be configured for refine to run under a different route like /admin for ex.
2 Replies
kapa.ai
kapa.ai•6mo ago
Hi @mephistopheles6125. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To configure routing for a different base URL like /admin in a refine application, you can follow these steps based on the provided knowledge sources: 1. Custom Router Component: You can create a custom router component that specifies the base path. This is useful when you want to serve your refine application from a subdirectory. 2. Router Provider Configuration: You need to configure the routerProvider in your refine setup to use this custom router component. Here is an example of how you can achieve this: Step 1: Create a Custom Router Component Create a custom router component that sets the base path to /admin. 
const CustomRouterComponent = () => (
  <RouterComponent location={location} basepath="/admin" />
);
const CustomRouterComponent = () => (
  <RouterComponent location={location} basepath="/admin" />
);
Step 2: Configure the Router Provider Pass this custom router component to the routerProvider in your refine configuration. 
import { Refine } from "@refinedev/core";
import { BrowserRouter } from "react-router-dom";
import { ConfigProvider } from "antd";

const App = () => (
  <BrowserRouter>
    <ConfigProvider>
      <Refine
        routerProvider={{
          ...routerProvider,
          RouterComponent: CustomRouterComponent,
        }}
      >
        {/* Your routes and other components */}
      </Refine>
    </ConfigProvider>
  </BrowserRouter>
);

export default App;
import { Refine } from "@refinedev/core";
import { BrowserRouter } from "react-router-dom";
import { ConfigProvider } from "antd";

const App = () => (
  <BrowserRouter>
    <ConfigProvider>
      <Refine
        routerProvider={{
          ...routerProvider,
          RouterComponent: CustomRouterComponent,
        }}
      >
        {/* Your routes and other components */}
      </Refine>
    </ConfigProvider>
  </BrowserRouter>
);

export default App;
Step 3: Define Routes with the Base Path Ensure that your routes are defined with the base path in mind. For example: 
<Route path="/admin/users" element={<UserList />} />
<Route path="/admin/canvases" element={<CanvasList />} />
<Route path="/admin/users" element={<UserList />} />
<Route path="/admin/canvases" element={<CanvasList />} />
Additional Configuration If you encounter issues with resources not being prefixed correctly, you can manually prefix the resource paths as a workaround: 
resources={[
  {
    name: "users",
    list: "/admin/users",
    show: "/admin/users/show/:id",
  },
  {
    name: "posts",
    list: "/admin/posts",
    show: "/admin/posts/show/:id",
  },
]}
resources={[
  {
    name: "users",
    list: "/admin/users",
    show: "/admin/users/show/:id",
  },
  {
    name: "posts",
    list: "/admin/posts",
    show: "/admin/posts/show/:id",
  },
]}
References - Serving the application from a subdirectory (https://github.com/refinedev/refine/issues/3207) - Base path for resources (https://github.com/refinedev/refine/issues/3953) - Router Provider Documentation (https://refine.dev/docs/api-reference/core/providers/router-provider/#serving-the-application-from-a-subdirectory) By following these steps, you should be able to configure your refine application to run under a different route like /admin. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6mo ago
<@908078982681989150> kapa.ai is still learning and improving, please let us know how it did by reacting below

Did you find this page helpful?