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
Check you're on the right track by comparing your changes with the ones in this commit.
Last modified 5mo ago
Copy link