Category: React Answers

To fix ‘Switch’ is not exported from ‘react-router-dom’ with React Router, we should use version 5 of React Router.

First we uninstall the existing version of React Router with

npm uninstall react-router-dom

Then install the version 5.2.0 of react-router-dom

npm install react-router-dom@5.2.0

To set an item to have position absolute center with React Native, we can set the position to absolute.

Then we set justifyContent and alignItems to center to center out item.

For instance, we write

<View
  style={{
    position: "absolute",
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: "center",
    alignItems: "center",
  }}
>
  <Text>text here ...</Text>
</View>

to set the position, top, left, right and bottom values.

Then we center our View by setting justifyContent and alignItems to center.

To get current language i18n-next React, we use the i18n.language.

For instance, we add

i18n.language

in our React app to get the current language.

To add react meta description with i18n-next React, we can use the useIntl hook with React Helmet.

We install React Helmet with

npm i react-helmet

Then we use the useIntl hook to get the formatMessage function.

And then we add the meta tag into the Helmet component provided by React Helmet.

Then we set the content prop to a string returned by the f function to get the translated string by the id property.

import { useIntl } from 'react-intl';

const DescriptionMeta = () => {
  const { formatMessage: f } = useIntl();

  return (
    <Helmet>
      <meta name="description" content={f({ id: 'meta.description' })} />
    </Helmet>
  );
};

To turn off suspense with i18n-next React, we set the useSuspense option to false.

To do this, we write

i18n
  .use(XHR)
  .use(LanguageDetector)
  .init({
    react: { 
      useSuspense: false 
    }
});

to set useSuspense to false in the object we pass into the init method.