How can I move to another page when I click on Gallery

Question

I was making a website in which we have a fixed button for the gallery.

I want it so that when the user clicks on it the user will move to a completely different page and only photos are shown on the page.

For this, I tried to make a layout through Layout.js but things are not working well.

You can understand better through the code, following is the App.js,

import React from 'react';

import { AboutUs, Header, SpecialMenu  , Chef, Gallery} from './container';
import { Navbar } from './components';
import './App.css';
import Layout from './Layout';
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
const App = (props) => (
  <BrowserRouter>
   <Routes>
     <Route path="/gallery" element={<Gallery/>}></Route>
   </Routes>
 </BrowserRouter>
);

export default App;

And this is the Layout.js,

import React from 'react'
import { AboutUs, Header, SpecialMenu, Chef, Gallery } from './container';
import { Navbar } from './components';
import './App.css';
export default function Layout(props) {
    return (
        <>
            <Navbar/>
            <Header/>
            <AboutUs/>
            <SpecialMenu/>
            <Chef/>
            {props.children}
        </>
    )
}

Answer 1

This is working for me

App.js,

import React from 'react';

import { AboutUs, Header, SpecialMenu  , Chef, Gallery} from './container';
import { Navbar } from './components';
import './App.css';
import Layout from './Layout';
import {
  BrowserRouter,
  Routes,
  Route,
} from "react-router-dom";
const App = (props) => (
  <BrowserRouter>
   <Routes>
     <Route path="/gallery" element={<Gallery/>}></Route>
     <Route  path='/' element={<Layout><Navbar/></Layout>}></Route>
   </Routes>
 </BrowserRouter>
);
export default App;

And Layout.js

import React from 'react'
import { AboutUs, Header, SpecialMenu, Chef, Gallery } from './container';
import { Navbar } from './components';
import './App.css';
export default function Layout(props) {
    return (
        <>
            <Navbar/>
            <Header/>
            <AboutUs/>
            <SpecialMenu/>
            <Chef/>
        </>
    )
}