dynamic i18n resource route prefix path

verbal-lime · 2023-05-03T20:39:20.702Z

I already configured the router package (`react-router-dom` v6) to add a "lang" path prefix to my app, so I can have these routes for example: - /en/posts - /es/posts - /fr/posts - etc... But now I have to configure the `resources` property in the ` ` component, and I don't know how I can make these two things work together, as it seems that these paths must be static. I still don't understand fully in which circumstances these paths are used by Refine, as I don't use them in my menu navigation components. I also tried searching here and in github but didn't find anything related.

K

kapa.ai•5/3/23, 8:39 PM

Hi @rhengles. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base.

K

kapa.ai•5/3/23, 8:40 PM

----------------------
Refine's

resources

resources

prop allows you to define the resources and their action paths. These paths are used by Refine to generate breadcrumbs, menus, handle redirections, and infer the current resource and action. However, the route management is handled by your preferred framework, in this case,

react-router-dom

react-router-dom

v6.

To achieve the desired behavior with language prefixes, you can define your resources with dynamic paths using the language prefix. Here's an example:

const App = () => {
  const lang = "en"; // Replace this with the logic to get the current language

  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/${lang}/posts`,
            create: `/${lang}/posts/create`,
          },
          {
            name: "categories",
            list: `/${lang}/categories`,
            show: `/${lang}/categories/show/:id`,
          },
        ]}
      >
        <Routes>
          <Route path={`${lang}/posts`}>
            <Route index element={<PostList />} />
            <Route path="create" element={<PostCreate />} />
          </Route>
          <Route path={`${lang}/categories`}>
            <Route index element={<CategoryList />} />
            <Route path="show/:id" element={<CategoryShow />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

const App = () => {
  const lang = "en"; // Replace this with the logic to get the current language

  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/${lang}/posts`,
            create: `/${lang}/posts/create`,
          },
          {
            name: "categories",
            list: `/${lang}/categories`,
            show: `/${lang}/categories/show/:id`,
          },
        ]}
      >
        <Routes>
          <Route path={`${lang}/posts`}>
            <Route index element={<PostList />} />
            <Route path="create" element={<PostCreate />} />
          </Route>
          <Route path={`${lang}/categories`}>
            <Route index element={<CategoryList />} />
            <Route path="show/:id" element={<CategoryShow />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

const App = () => {
  const lang = "en"; // Replace this with the logic to get the current language

  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/${lang}/posts`,
            create: `/${lang}/posts/create`,
          },
          {
            name: "categories",
            list: `/${lang}/categories`,
            show: `/${lang}/categories/show/:id`,
          },
        ]}
      >
        <Routes>
          <Route path={`${lang}/posts`}>
            <Route index element={<PostList />} />
            <Route path="create" element={<PostCreate />} />
          </Route>
          <Route path={`${lang}/categories`}>
            <Route index element={<CategoryList />} />
            <Route path="show/:id" element={<CategoryShow />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

const App = () => {
  const lang = "en"; // Replace this with the logic to get the current language

  return (
    <BrowserRouter>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/${lang}/posts`,
            create: `/${lang}/posts/create`,
          },
          {
            name: "categories",
            list: `/${lang}/categories`,
            show: `/${lang}/categories/show/:id`,
          },
        ]}
      >
        <Routes>
          <Route path={`${lang}/posts`}>
            <Route index element={<PostList />} />
            <Route path="create" element={<PostCreate />} />
          </Route>
          <Route path={`${lang}/categories`}>
            <Route index element={<CategoryList />} />
            <Route path="show/:id" element={<CategoryShow />} />
          </Route>
        </Routes>
      </Refine>
    </BrowserRouter>
  );
};

In this example, the

lang

lang

lang

lang variable is used to dynamically set the language prefix in the resource paths. You should replace the

lang

lang

lang

lang variable with the logic to get the current language in your application.

K

kapa.ai•5/3/23, 8:40 PM

Keep in mind that Refine doesn't restrict you to use the router in a specific way, and it's up to you to decide how you want to use it. You can define your routes the way you want, then pass the

routerProvider

routerProvider

routerProvider

routerProvider prop to the

Refine

Refine

component and use the

resources

resources

prop to define the resources and their action paths (source (https://refine.dev/docs/packages/documentation/routers/react-router-v6)).

For more information on resources and their usage, you can refer to the Understanding Resources (https://refine.dev/docs/tutorial/understanding-resources/index) section in the Refine documentation.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

Resources | refine

In Unit 2.4, we defined a resource to create our CRUD pages with the Inferencer component but did not explain how it works. We will take care of that in this unit and thoroughly explain the resources prop of the `` component using mock components.

K

kapa.ai•5/3/23, 8:40 PM

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

C

colossal-harlequin•5/3/23, 8:50 PM

Hey @rhengles,

The menu item's route comes from your resource list definition. So, If you defined the resource's list path like kapa.ai answer, it should work as expected.

V

verbal-limeOP•5/3/23, 8:52 PM

@kapa.ai Thank you!
This doc page:
https://refine.dev/docs/tutorial/understanding-resources/index
Says this:

```js

({
name: "blog_posts",
edit: "/blog-posts/edit/:id/:version",
})

``
> These additional parameters, except for the

``
> These additional parameters, except for the

``
> These additional parameters, except for the

``
> These additional parameters, except for the

id

 parameter, can be passed to the components or hooks using

parameter, can be passed to the components or hooks using

 parameter, can be passed to the components or hooks using

parameter, can be passed to the components or hooks using meta

 properties. The existing parameters in the URL will be used by default when handling the navigation.

I don't know where or how these

 properties. The existing parameters in the URL will be used by default when handling the navigation.

I don't know where or how these

 properties. The existing parameters in the URL will be used by default when handling the navigation.

I don't know where or how these

 properties. The existing parameters in the URL will be used by default when handling the navigation.

I don't know where or how these

meta` properties are defined, and there are no other mentions on that page and I didn't find any relevant links on that page.

Resources | refine

In Unit 2.4, we defined a resource to create our CRUD pages with the Inferencer component but did not explain how it works. We will take care of that in this unit and thoroughly explain the resources prop of the `` component using mock components.

K

kapa.ai•5/3/23, 8:52 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•5/3/23, 8:52 PM

----------------------
You can use the

meta

meta

property in hooks and components to pass additional parameters to the redirection path after the form is submitted or when generating the redirection path. The

meta

meta

property is used for various purposes, such as passing additional information to data provider methods, generating GraphQL queries, and providing additional parameters to the redirection path (source (https://refine.dev/docs/api-reference/core/hooks/useForm)).

Here's an example of how to use the

meta

meta

property with the

useForm

useForm

hook:

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

const MyFormComponent = () => {
  const { formProps } = useForm({
    meta: {
      version: "1.0",
    },
  });

  // ...
};

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

const MyFormComponent = () => {
  const { formProps } = useForm({
    meta: {
      version: "1.0",
    },
  });

  // ...
};

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

const MyFormComponent = () => {
  const { formProps } = useForm({
    meta: {
      version: "1.0",
    },
  });

  // ...
};

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

const MyFormComponent = () => {
  const { formProps } = useForm({
    meta: {
      version: "1.0",
    },
  });

  // ...
};

In this example, the

version

version

property is passed in the

meta

meta

object. When the form is submitted, the

version

version

property will be used to fill in the path parameters for the redirection.

For more information on how to use the

meta

meta

property, you can refer to the General Concepts -
meta
meta
(https://refine.dev/docs/api-reference/general-concepts/#meta) section in the Refine documentation.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

General Concepts | refine

refine core is fully independent of UI. So you can use core components and hooks without any UI dependency.

K

kapa.ai•5/3/23, 8:52 PM

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

V

verbal-limeOP•5/3/23, 8:53 PM

@salihozdemir Thank you, but the problem is that the

lang

lang

lang

lang is dynamic, and as far as I understand, I need to use

useParams()

useParams()

useParams()

useParams() to get the lang, but this hook must be called inside the

<Route path=":lang">

<Route path=":lang">

<Route path=":lang">

<Route path=":lang"> AFAICT

V

verbal-limeOP•5/3/23, 8:57 PM

@kapa.ai Yeah this

useForm()

useForm()

useForm()

useForm() hook is unrelated, but this General Concepts link is good

K

kapa.ai•5/3/23, 8:57 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•5/3/23, 8:58 PM

----------------------
I apologize for the confusion. The

meta

meta

property is used for various purposes, such as passing additional information to data provider methods, generating GraphQL queries, and providing additional parameters to the redirection path. You can find more information on how to use the

meta

meta

property in the General Concepts -
meta
meta
(https://refine.dev/docs/api-reference/general-concepts/#meta) section in the Refine documentation.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

General Concepts | refine

refine core is fully independent of UI. So you can use core components and hooks without any UI dependency.

K

kapa.ai•5/3/23, 8:58 PM

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

V

verbal-limeOP•5/3/23, 9:02 PM

@kapa.ai Thank you, but the problem is that the

:lang

:lang

:lang

:lang parameter is dynamic, and as far as I understand, I need to use

useParams()

useParams()

useParams()

useParams() hook from "react-router-dom" v6 to get the

:lang

:lang

:lang

:lang value, but this hook must be called inside the

<Route path=":lang">

<Route path=":lang">

<Route path=":lang">

<Route path=":lang"> as far as I understand, which is itself a child of the

<Refine>

<Refine>

component.

Maybe I do need to create my own provider so I can send this lang parameter up the component tree ?

K

kapa.ai•5/3/23, 9:02 PM

Let me check the knowledge base for you. One moment!

K

kapa.ai•5/3/23, 9:03 PM

----------------------
You're correct that you need to use the

useParams()

useParams()

useParams()

useParams() hook from

react-router-dom

react-router-dom

v6 to get the

:lang

:lang

:lang

:lang value. To pass the

lang

lang

lang

lang parameter up the component tree, you can create a custom context provider. Here's an example of how you can achieve this:

Create a
```
LanguageContext
```
LanguageContext
```
LanguageContext
```
LanguageContext
:

import { createContext, useContext } from "react";

const LanguageContext = createContext();

export const useLanguage = () => useContext(LanguageContext);

export const LanguageProvider = ({ children, lang }) => (
  <LanguageContext.Provider value={lang}>{children}</LanguageContext.Provider>
);

import { createContext, useContext } from "react";

const LanguageContext = createContext();

export const useLanguage = () => useContext(LanguageContext);

export const LanguageProvider = ({ children, lang }) => (
  <LanguageContext.Provider value={lang}>{children}</LanguageContext.Provider>
);

import { createContext, useContext } from "react";

const LanguageContext = createContext();

export const useLanguage = () => useContext(LanguageContext);

export const LanguageProvider = ({ children, lang }) => (
  <LanguageContext.Provider value={lang}>{children}</LanguageContext.Provider>
);

import { createContext, useContext } from "react";

const LanguageContext = createContext();

export const useLanguage = () => useContext(LanguageContext);

export const LanguageProvider = ({ children, lang }) => (
  <LanguageContext.Provider value={lang}>{children}</LanguageContext.Provider>
);

Wrap your
```
Refine
```
```
Refine
```
component with the
```
LanguageProvider
```
LanguageProvider
```
LanguageProvider
```
LanguageProvider
:

import { LanguageProvider } from "./LanguageContext";

const App = () => {
  // ...

  return (
    <BrowserRouter>
      <Routes>
        <Route path=":lang" element={<LanguageWrapper />}>
          {/* Your other routes */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

const LanguageWrapper = () => {
  const { lang } = useParams();

  return (
    <LanguageProvider lang={lang}>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/:lang/posts`,
            create: `/:lang/posts/create`,
          },
          {
            name: "categories",
            list: `/:lang/categories`,
            show: `/:lang/categories/show/:id`,
          },
        ]}
      >
        {/* Your other components */}
      </Refine>
    </LanguageProvider>
  );
};

import { LanguageProvider } from "./LanguageContext";

const App = () => {
  // ...

  return (
    <BrowserRouter>
      <Routes>
        <Route path=":lang" element={<LanguageWrapper />}>
          {/* Your other routes */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

const LanguageWrapper = () => {
  const { lang } = useParams();

  return (
    <LanguageProvider lang={lang}>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/:lang/posts`,
            create: `/:lang/posts/create`,
          },
          {
            name: "categories",
            list: `/:lang/categories`,
            show: `/:lang/categories/show/:id`,
          },
        ]}
      >
        {/* Your other components */}
      </Refine>
    </LanguageProvider>
  );
};

import { LanguageProvider } from "./LanguageContext";

const App = () => {
  // ...

  return (
    <BrowserRouter>
      <Routes>
        <Route path=":lang" element={<LanguageWrapper />}>
          {/* Your other routes */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

const LanguageWrapper = () => {
  const { lang } = useParams();

  return (
    <LanguageProvider lang={lang}>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/:lang/posts`,
            create: `/:lang/posts/create`,
          },
          {
            name: "categories",
            list: `/:lang/categories`,
            show: `/:lang/categories/show/:id`,
          },
        ]}
      >
        {/* Your other components */}
      </Refine>
    </LanguageProvider>
  );
};

import { LanguageProvider } from "./LanguageContext";

const App = () => {
  // ...

  return (
    <BrowserRouter>
      <Routes>
        <Route path=":lang" element={<LanguageWrapper />}>
          {/* Your other routes */}
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

const LanguageWrapper = () => {
  const { lang } = useParams();

  return (
    <LanguageProvider lang={lang}>
      <Refine
        dataProvider={dataProvider}
        routerProvider={routerProvider}
        resources={[
          {
            name: "posts",
            list: `/:lang/posts`,
            create: `/:lang/posts/create`,
          },
          {
            name: "categories",
            list: `/:lang/categories`,
            show: `/:lang/categories/show/:id`,
          },
        ]}
      >
        {/* Your other components */}
      </Refine>
    </LanguageProvider>
  );
};

Use the
```
useLanguage
```
useLanguage
```
useLanguage
```
useLanguage
hook to get the current language in your components:

import { useLanguage } from "./LanguageContext";

const MyComponent = () => {
  const lang = useLanguage();

  // ...
};

import { useLanguage } from "./LanguageContext";

const MyComponent = () => {
  const lang = useLanguage();

  // ...
};

import { useLanguage } from "./LanguageContext";

const MyComponent = () => {
  const lang = useLanguage();

  // ...
};

import { useLanguage } from "./LanguageContext";

const MyComponent = () => {
  const lang = useLanguage();

  // ...
};

K

kapa.ai•5/3/23, 9:03 PM

This way, you can access the

lang

lang

lang

lang parameter from the

useLanguage

useLanguage

useLanguage

useLanguage hook in any component that is a child of the

LanguageProvider

LanguageProvider

LanguageProvider

LanguageProvider.
----------------------

Note: you can ask me a follow up question by @ mentioning me again

Note: you can ask me a follow up question by @ mentioning me again

----------------------

K

kapa.ai•5/3/23, 9:03 PM

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

C

colossal-harlequin•5/3/23, 9:04 PM

For similar logic, you can check this example: https://refine.dev/docs/examples/multi-tenancy/strapi-v4/