Add a 404 page
And now we come to a nice easy step. All we need to do here is create a component to inform the user that the page can't be found and then use it in our
<Root> component.First create a new file in the
components directory. Call it error.js and put this code in the file:1
// File: /packages/my-first-theme/src/components/error.js
2
3
import React from "react"
4
import { connect } from "frontity"
5
6
const Error = ({ state }) => {
7
return (
8
<>
9
<h2>404 Error</h2>
10
<p>
11
The path <em>{state.router.link}</em> cannot be found.
12
</p>
13
</>
14
)
15
}
16
17
export default connect(Error)
Copied!
It's not really necessary to connect the component to the state if you just want to display a simple error message, but here we want to show the path that resulted in the 404 error.
It remains for us to use it in our
<Root> component. First we import the <Error> component, then we add it as the last item in our <Switch> component which selects what component to use depending on the first matching condition.1
// File: /packages/my-first-theme/src/components/index.js
2
3
// ...
4
import Error from "./error"
5
6
// ...
7
;<Switch>
8
<Loading when={data.isFetching} />
9
<List when={data.isArchive} />
10
<Page when={data.isPage} />
11
<Post when={data.isPost} />
12
<Page when={data.isDestinations} />
13
<Error when={data.isError} />
14
</Switch>
15
// ...
Copied!
And that's it! As we said earlier, this was a nice easy step. Now if you try navigating to a path that doesn't exist the
<Error> component will display informing the user of the error.
Frontity in the browser
Last modified 8mo ago
Copy link