function App() {
    
    
    
      return (
    <Router >
          <NavBar/>
          <Routes>
          
          <Route  path="/" element={<HomePage />}/>
              <Route exact path="/about-us" element={<About />} />
     <Route exact path="/admin" element = {<Admin/>}/>
     </Routes>
            <Footer/>
        </Router>
    );
    }
    
    
    
    export default App;

//How can i separate header and footer of homepage from displaying in admin page in react

CodePudding user response：

You have to define the routes in app.js

const App = () => {
  return (
    <React.Fragment>
      <BrowserRouter>
        <Switch>
          <Route exact path="/">
            <Redirect push to="/login" />
          </Route>
          <Route exact path="/login" component={Login} />
          <Route exact path="/forgotPassword" component={ForgotPassword} />
          <AdminRoute exact path="/dashboard" component={Dashboard} />
          <AdminRoute exact path="/logout" component={Logout} />
        </Switch>
        <ToastContainer position="top-right" theme="colored" />
      </BrowserRouter>
    </React.Fragment>
  );
};

Dashboard component will be like that...

const Dashboard = () => {
  return (
    <React.Fragment>
      <LayoutContainer>
        <AdminHeader title="Dashboard" />
        <div className="page-content-wrapper scrollable">
          <div>
            <h3 style={{ color: 'red' }}>Dashboard</h3>
          </div>
        </div>
        <AdminFooter title="Dashboard" />
      </LayoutContainer>
    </React.Fragment>
  );
};

CodePudding user response：

Following react-router-dom v6 docs getting-started

Create different layout and using Outlet component to slot your view into the layout

import { Outlet } from 'react-router-dom'

function BasicLayout() {
  return (
    <>
      <NavBar />
      <Outlet />
      <Footer />
    </>
  )
}

function AdminLayout() {
  return <Outlet />
}

function App() {
  return (
    <Router >
      <Routes>
        <Route path="/" element={<BasicLayout />}>
          <Route index element={<HomePage />}/>
          <Route path="about-us" element={<About />} />
        </Route>
        <Route path="/admin" element={<AdminLayout />}>
          <Route index element={<Admin/>}/>
        </Route>
      </Routes>
    </Router>
  );
}

export default App;