How to show 404 message, but don't show header and footer?-CodePudding

What should be added here so that the header footer does not show?

import React from 'react';
import './NotFound.css'
import image from '../../../src//Images//404.jpg'

const NotFound = () => {
    return (
        <div >
            <img className="not-found" src={image} alt="" />

        </div>
    );
};

export default NotFound;

CodePudding user response：

You can render this message conditionally in parent component, for example:

<React.Fragment>
    { NotFoundError ? <NotFound/> : <MainComponent/> }
</React.Fragment>

CodePudding user response：

Simplest way is to make image of full height and width using CSS or image is not that big just make it's container of full height and width.