base.tsx

export const Base = ({ children }) => (
  <div className="something">
    This is my base
    <NavLinks />
    {children}
    <Footer />
  </div>
);

index.tsx

import { Base } from './base';

export const IndexRoute = () => {
  return (
    <Base>
      This content is inside Base, but only on index.tsx
    </Base>
  );
}

settings.tsx

import { Base } from './base';

export const SettingsRoute = () => {
  return (
    <Base>
      This content is inside Base, but only on settings.tsx
    </Base>
  );
}