Tienes un par de errores:

• use === al comparar en lugar de == para evitar la coerción de tipos
• al configurar el estado setError(typeof (error.message)); , elimine typeof , setError(error.message);
• al probar el error.message de error, simplemente pruebe el error y también muestre error

Aquí hay una caja de arena

Nota : eliminé <Link> solo para la demostración para dejar de arrojar errores en Routes

 import { useParams } from "react-router-dom"; import { useState, useEffect } from "react"; import axios from "axios"; function User() { const { id } = useParams(); const [user, setUser] = useState(null); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(true); useEffect(() => { axios("https://jsonplaceholder.typicode.com/users/" + id) .then((res) => setUser(res.data)) .catch((error) => setError(error.message)) .finally(() => setIsLoading(false)); }, [id]); return ( <div> {error === "Request failed with status code 404" ? ( <p>{error}</p> ) : isLoading ? ( <h2>Loading...</h2> ) : ( <div> <h3>User Info</h3> <p>Name: {user.name}</p> <p>Email: {user.email}</p> <p>Phone: {user.phone}</p> </div> )} </div> ); } export default User;

Intente reorganizar su renderizado lógico verifique las condiciones

 import { useParams, Link, Route, Routes } from 'react-router-dom'; import { useState, useEffect } from 'react'; import axios from 'axios'; function User() { const { id } = useParams(); const [user, setUser] = useState(null); const [error, setError] = useState(null); const [isLoading, setIsLoading] = useState(true); console.log("error", error); useEffect(() => { axios("https://jsonplaceholder.typicode.com/users/" + id) .then(res => setUser(res.data)) .catch(error => { console.log("Error=>", error); console.log(error.message); // set error instead of type of the error setError(error); console.log("Check",error.message == 'Request failed with status code 404'); }) .finally(() => { setIsLoading(false); }); }, [id]); return ( <div>{loading? <h2>Loading...</h2> : <div> {error?.message ===null? <p>'Request failed with status code 404'<p> : <p>{error.message}</p>} <h3>User Info</h3> <p>Name: {user.name}</p> <p>Email: {user.email}</p> <p>Phone: {user.phone}</p> </div> </div> } <Link to={`/users/${parseInt(id) + 1}`}><button>Next User</button></Link> </div> ) } export default User

Al ver que está utilizando una cadena vacía en el estado, simplemente pase el mensaje de error.message directamente y luego su error contendrá una cadena.

 function User() { const { id } = useParams(); const [user, setUser] = useState(null); const [error, setError] = useState(""); const [isLoading, setIsLoading] = useState(true); console.log("error", error); useEffect(() => { axios("https://jsonplaceholder.typicode.com/users/" + id) .then(res => setUser(res.data)) .catch(error => { console.log("Error=>", error); console.log(error.message); setError(error.message); // change this console.log("Check",error.message == 'Request failed with status code 404'); }) .finally(() => { setIsLoading(false); }); }, [id]); return ( <div> {/* and change this as well */} {error ? <p>{error.message}</p> : isLoading ? <h2>Loading...</h2> : <div> <h3>User Info</h3> <p>Name: {user.name}</p> <p>Email: {user.email}</p> <p>Phone: {user.phone}</p> </div> } <Link to={`/users/${parseInt(id) + 1}`}><button>Next User</button></Link> </div> ) }