How to check if a pariticular fileExists in reactjs

You can try to require your file and then depending on the result display the correct component.

const tryRequire = (path) => {
  try {
   return require(`${path}`);
  } catch (err) {
   return null;
  }
};

Then to use it :

render() {
 const Header = tryRequire('yourPath') ? tryRequire('yourPath').default 
   : DefaultHeader;

 return (
   <Header />
 );
}

There is another way using React.lazy but to do so you will need to create a component that is located at to root of your project (if you are using Create React App it will be placed at ./src/DynamicImport.js).

Here's the logic:

import React, { Suspense, useState, useEffect, lazy } from 'react';

const importCompo = (f, defaultComponentPath) =>
  lazy(() =>
    import(`./${f}`).catch((err) => {

    // Simulate behaviour in Strapi
    // Lazy only support default export so there's a trick to do here 
       when using a library that does not have a default export
    // The example here uses the strapi-helper-plugin package
    if (defaultComponentPath === 'strapi-helper-plugin') {
      return import('strapi-helper-plugin').then((module) => {
        const { Button } = module;

        return {
          // Here's the trick
          // I am creating a new component here
          default: () => <Button primary>Something</Button>,
        };
      });
   }

  return import(`${defaultComponentPath}`);
 }),
);

const DynamicImport = ({ filePath, defaultComponentPath, ...rest }) => {
  const [module, setModule] = useState(null);

  useEffect(() => {
    const loadCompo = () => {
      const Compo = importCompo(filePath, defaultComponentPath);

      setModule(<Compo {...rest} />);
    };

    loadCompo();
  }, []);

  return <Suspense fallback="loading">{module}</Suspense>;
};

DynamicImport.defaultProps = {
  // defaultComponentPath: './components/DefaultCompo',
  defaultComponentPath: 'strapi-helper-plugin',
};

export default DynamicImport;

Then to use it:

const MyCompo = props => {
  return (
    <DynamicImport
      filePath="./components/Foo"
      defaultComponentPath="./components/DefaultCompo"
    />
  );
};