how you can configure your app/server to handle nested page requests on Netlify ? Route State Refresh Error How to Avoid it?

Question

I am passing Data Through route State to open Contact Detail Page

Here is my Website You can Check The error When Click on Name Click Here

Here is How I am passing data

<Link to={`/contactdetail/${curlElem.name}`} state={{name: curlElem.name, email: curlElem.email}}>
<h4 className='header'>{curlElem.name}</h4>
<p>Email:{curlElem.email}</p>
</Link>

And Here You can See How i am receiving on Contact Detail Page to get COntact Details

import React from 'react'
import me from "../images/me3.jpg"
import {Link} from "react-router-dom"
import {useLocation} from "react-router-dom"
const ContactDetail = () => {
  const location=useLocation();
  const {name,email}=location.state;
  // console.log(props.detailcontact);
  // const{id,name,email}=props.detailcontact;
  return (
   <div className='main'>
    <div className='ui card centered'>
      <div className='image'>
<img src={me} alt="me"/>
      </div>
<div className='content'>
<div className='header'>Name:{name}</div>
<div className='discription'>Email:{email}</div>
</div>
<div className="center-div">
<Link to="/">
<div><button className='ui button blue centered'>Back to Contact</button></div>
</Link>
</div>
    </div>
   
   </div>
  )
}

the issue is when i go to contact Detail Page and refresh it i got an error

Answer 1

Update!.................... It was Not an Error of Route/state It was an error of Netlify

I solved it by Doing Adding netlify.toml file in Route Directory

[build]
command="npm run build"
publish="/build"
base="/"

[[redirects]]
from="/*"
to="/index.html"
status=200