I’m trying to implement a button in React using the Material UI framework. Every tutorial I see for this is like,

 <div className="App">
     <Routes>
         <Route path='/' element={<Home/>} />
         <Route path='/about' element={<About/>} />
         <Route path='/contact' element={<Contact/>} />
       </Routes>
     </div>

but here is how my code looks, and I’m unsure where to add Routing. I have just links for now in my Button component like so,

export default function TryNowButton() {
  const navigateTo = useNavigate();
  const path = '/Page.tsx'

  const handleClick = () => {
    // Navigate to a new page
    navigateTo(path)
  };

  return (
    <Grid
      container
      rowSpacing={1}
      columnSpacing={{ xs: 2 }}
      direction="row"
      justifyContent="flex-start"
      alignItems="center"
    >
      <Grid item>
        <Button onClick={handleClick} variant="contained" color="primary">Try now</Button>
      </Grid>
...

(I’m using a placeholder for my target page, just pretend it’s the right path). But I don’t know where to put my Routes – this is what my app.tsx looks like.

const App: React.FC = () => {


  return (
    
    <div>
      <Layout>
        <FullScreenCover
          title="text"
          description="text."
          imageSrc={CoverImageOne}
        />

where FullScreenCover is a react component that contains the above button component. How do I do the routes here?

I tried adding Routing, and I expected the button to work. I added the Routes to under the existing HTML tags in the return statement of the apps, and it did not work, it just made the app screen white when I open it.