fix 404 page
This commit is contained in:
parent
e552393a30
commit
ef7f75d768
|
@ -21,7 +21,14 @@ const useStyles = makeStyles(theme => ({
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const Layout = ({ children, className, lang, pathname }) => {
|
const Layout = ({
|
||||||
|
children,
|
||||||
|
className,
|
||||||
|
lang,
|
||||||
|
pathname,
|
||||||
|
showHeader,
|
||||||
|
showFooter,
|
||||||
|
}) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
const { site } = useStaticQuery(
|
const { site } = useStaticQuery(
|
||||||
graphql`
|
graphql`
|
||||||
|
@ -39,28 +46,37 @@ const Layout = ({ children, className, lang, pathname }) => {
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ThemeProvider theme={theme}>
|
<ThemeProvider theme={theme}>
|
||||||
<Header
|
{showHeader && (
|
||||||
twhelpUrl={site.siteMetadata.twhelpUrl}
|
<Header
|
||||||
languages={site.siteMetadata.languages}
|
twhelpUrl={site.siteMetadata.twhelpUrl}
|
||||||
lang={lang}
|
languages={site.siteMetadata.languages}
|
||||||
pathname={pathname}
|
lang={lang}
|
||||||
/>
|
pathname={pathname}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
<main
|
<main
|
||||||
className={className ? classes.main + " " + className : classes.main}
|
className={className ? classes.main + " " + className : classes.main}
|
||||||
>
|
>
|
||||||
<div className={classes.mainChild}>{children}</div>
|
<div className={classes.mainChild}>{children}</div>
|
||||||
</main>
|
</main>
|
||||||
<Footer title={site.siteMetadata.title} lang={lang} />
|
{showFooter && <Footer title={site.siteMetadata.title} lang={lang} />}
|
||||||
<CssBaseline />
|
<CssBaseline />
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Layout.defaultProps = {
|
||||||
|
showHeader: true,
|
||||||
|
showFooter: true,
|
||||||
|
};
|
||||||
|
|
||||||
Layout.propTypes = {
|
Layout.propTypes = {
|
||||||
children: PropTypes.node.isRequired,
|
children: PropTypes.node.isRequired,
|
||||||
className: PropTypes.string,
|
className: PropTypes.string,
|
||||||
lang: PropTypes.string.isRequired,
|
lang: PropTypes.string.isRequired,
|
||||||
pathname: PropTypes.string.isRequired,
|
pathname: PropTypes.string.isRequired,
|
||||||
|
showHeader: PropTypes.bool.isRequired,
|
||||||
|
showFooter: PropTypes.bool.isRequired,
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Layout;
|
export default Layout;
|
||||||
|
|
|
@ -2,6 +2,7 @@ import React from "react";
|
||||||
|
|
||||||
import { makeStyles } from "@material-ui/core/styles";
|
import { makeStyles } from "@material-ui/core/styles";
|
||||||
import { Container, Typography } from "@material-ui/core";
|
import { Container, Typography } from "@material-ui/core";
|
||||||
|
import { Link } from "gatsby-theme-material-ui";
|
||||||
import Layout from "@components/Layout/Layout";
|
import Layout from "@components/Layout/Layout";
|
||||||
import SEO from "@components/SEO";
|
import SEO from "@components/SEO";
|
||||||
|
|
||||||
|
@ -14,16 +15,29 @@ const useStyles = makeStyles(() => ({
|
||||||
},
|
},
|
||||||
}));
|
}));
|
||||||
|
|
||||||
const NotFoundPage = ({ location }) => {
|
const NotFoundPage = ({ location, pageContext }) => {
|
||||||
const classes = useStyles();
|
const classes = useStyles();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Layout>
|
<Layout
|
||||||
|
showHeader={false}
|
||||||
|
showFooter={false}
|
||||||
|
lang={pageContext.langKey}
|
||||||
|
pathname={location.pathname}
|
||||||
|
>
|
||||||
<SEO title="404: Not found" location={location.pathname} />
|
<SEO title="404: Not found" location={location.pathname} />
|
||||||
<Container className={classes.container}>
|
<Container className={classes.container}>
|
||||||
<Typography variant="h1">404</Typography>
|
<Typography gutterBottom variant="h1">
|
||||||
<Typography variant="h3">
|
Page Not Found
|
||||||
You just hit a route that doesn't exist.
|
</Typography>
|
||||||
|
<Typography gutterBottom variant="h4">
|
||||||
|
Looks like you've followed a broken link or entered a URL that doesn't
|
||||||
|
exist on this site.
|
||||||
|
</Typography>
|
||||||
|
<Typography variant="h4">
|
||||||
|
<Link color="secondary" to="/">
|
||||||
|
Back to our site
|
||||||
|
</Link>
|
||||||
</Typography>
|
</Typography>
|
||||||
</Container>
|
</Container>
|
||||||
</Layout>
|
</Layout>
|
||||||
|
|
Reference in New Issue
Block a user