i have configured react i18next with inertia and it works without SSR mode.
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
Error: Ziggy error: 'locale' parameter is required for route 'application.home.index'.
my routes are in following style:
import { useTranslation } from 'react-i18next';
const { t, i18n } = useTranslation();
route('application.home.index', {locale: i18n.language})
I imported this i18n.js file in app.jsx and nothing else import ./utlis/i18n.js';
And i have used useTransltion()
hook in components that i need to translate something.
I have attached an image to show the code snippet that I prepared for the i18n configurations.
I would appreciate it if you could help me to solve this error:
react-i18next:: You will need to pass in an i18next instance by using initReactI18next
this is my i18n.js file configuration:
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
i18n.use(Backend)
.use(initReactI18next)
.use(LanguageDetector)
.init({
detection: {
order: ["path", "htmlTag"],
},
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
});
export default i18n;
I think that i need to do some changes in app.jsx or ssr.jsx but I don't know which file is proper and can't find what type of changes do I need.
well, this is my i18n.js configuration.
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import Backend from "i18next-http-backend";
import LanguageDetector from "i18next-browser-languagedetector";
i18n.use(Backend)
.use(initReactI18next)
.use(LanguageDetector)
.init({
detection: {
order: ["path", "htmlTag"],
},
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
});
export default i18n;
and all i need to do is import that in app.jsx:
import './Utils/i18n';
and import it into ssr.jsx:
import i18n from './Utils/i18n';
and set i18n as global property in setup method:
setup: ({ App, props }) => {
global.i18n = i18n;
global.route = (name, params, absolute) =>
route(name, params, absolute, {
...page.props.ziggy,
location: new URL(page.props.ziggy.location),
});
return <App {...props} />;
},
```