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}
        </>
    )
}

score 1 · Accepted Answer · answered Oct 12 '22 at 14:06

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/>
        </>
    )
}

Fábio Fraga Paulo · Answer 2 · 2022-10-12T14:24:34.390

if you use react router v6, you need to use a Outlet component

function Dashboard() {
   return (
     <div>
       <Navbar/>
       <Header/>
       <AboutUs/>
       <SpecialMenu/>
       <Chef
       <Outlet />
     </div>
   );
}

and your app.js is something like this:

function App() {
  return (
     <BrowserRouter>
       <Routes>
         <Route path="/" element={<Layout />}>
           <Route path="gallery" element={<Gallery/>} />
         </Route>
       </Routes>
     </BrowserRouter>
 );
}

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

2 Answers2