Whenever I try to access /contact/product it works perfectly fine. But when I try to access it directly or I refresh whilst I’m on the page the page just becomes empty.
My routing:
<Router>
<ScrollToTop />
<Nav></Nav>
<Routes>
<Route path="/" exact element={<Home />} />
<Route path="/about" element={<About />} />
<Route path="/contact" element={<Contact />} />
<Route path="/contact/:product" element={<Contact />} />
<Route path="/privacy-policy" element={<Privacy />} />
<Route path="/cookie-policy" element={<Cookies />} />
<Route path="/pricing" element={<Pricing />} />
<Route path="/*" element={<NotFound />} />
</Routes>
<Footer></Footer>
</Router>
The contact component:
import React from "react";
import ContactForm from "../components/Contact/ContactForm";
import "../style/Contact/Contact.scss"
import "../style/Contact/Breakpoints.scss"
import useDocumentTitle from "../lib/useDocumentTitle";
function Contact() {
useDocumentTitle("Contact")
return (
<div id="contact">
<div className="container">
<div className="row">
<div className="contact--left left">
<h1 className="contact--title title">
Let’s build something great together
</h1>
</div>
<div className="contact--right right">
<ContactForm />
</div>
</div>
</div>
</div>
);
}
export default Contact;
I’ve tried making /product go to another component but it still doesnt work.