Content disappears while using UseNavigate Hook in React - reactjs

Question

I am very new to React Js. I want to move from the App Page to the Contact page using react. I tried using the latest useNavigate feature of React . But as soon as I use that hook all the content on my page disappears. I have used the format mentioned in the documentation .
Here is my Code:-
App.Js
import React from "react";
import { useNavigate } from "react-router-dom";
const App = () => {
const navigate = useNavigate();
const goToContact = () => {
navigate('/Contact');
};
return (
<div>
<h1>Hello</h1>
<button onClick={()=>goToContact()}>Contact</button>
</div>
);
};
export default App;
Contact.js
const Contact = () => {
return (
<div>
<h1>Contact</h1>
</div>
);
}
export default Contact;
The file structure
The Output

Answer 1

Don't create the onClick handler as a callback and mention the route in a browser router element so the click gets where to go. To simply navigate would not do that
e.g:
<button onClick={goToContact}>Contact</button>
And for router use this:
<Routes location={location} key={location.pathname}>
<Route path="/Contact" element={<Contact/>} />
</Routes>
Routes and Route are available in react-router-dom v6.
Router needs to be accessed in App.js.

Answer 2

The router will not make any connection between the Contact component and the route '/Contact' on its own. You need to set up your routes to tell the router what it should render for each path. You can do this in App.js for example:
import React from "react";
import { useNavigate } from "react-router-dom";
import Contact from './Contact'
const App = () => {
const navigate = useNavigate();
const goToContact = () => {
navigate('/Contact');
};
return (
<Routes>
<Route path="/" element={(
<div>
<h1>Hello</h1>
<button onClick={()=>goToContact()}>Contact</button>
</div>
)} />
<Route path="/Contact" element={<Contact/>} />
</Routes>
);
};
export default App;
Note that I have moved the content into the "/" path, otherwise you would have that render next to the Contact page. You can set up any content that is repeated on each page (such as navigation) around the <Routes> element.