#Routing to 404 in a route with parameters

3 messages · Page 1 of 1 (latest)

brittle karma
#

Hey there,
I'm having troubles with routing to my not-found page if there's an error with the id parameter of a path.

For example, http://localhost:3000/accommodation/c67ab8a7 will render my accommodation page alright. But, if I delete one character from the id, I get a blank page instead of my not-found page.

I think the issue lies in my if statement.
When the page is rendered with an error in the id, id and listing are undefined. So, I'm trying to use that in my if statement, but it's not working as I thought it would.

import {React, useEffect} from "react"
import { useParams, useNavigate } from "react-router-dom";

export default function accommodation () {
    const { id } = useParams()
    const listing = data.find(item => item.id === id)
    const navigate = useNavigate();

    useEffect(() => {

        if (!id) {
          navigate("/not-found", { replace: true });
        }
      }, [id]);

    return (...MyJSX...)
}

I saw that the React router course has a lesson on 404 using path="*", which works fine for non-parameter routes, but I don;t know if there's anything for routes with parameters. If so, please let me know!
Thanks!

hard hill
#

Are you planning to use loaders in your project? You could throw a not found response in your loader.

But also in your case, you can always just use a simple conditional rendering and show the not found page or something equivalent to the user.

brittle karma