In nested router, I want the parent router to disappear when I click child router

user_16999620 0
Viewed 937

three nested layer of react router

top level:

export default () => {
  return (
    <Router initialEntries={['/home']}>
      <div className='app'>
        <div className='top'>
          <NavBar>配合路由使用</NavBar>
        </div>
        <div className='body'>
          <Routes>
            <Route exact path ='/home/*' element={<Home/>}>
             
            </Route>
            <Route exact path='/todo/*' element={<Todo/>}>
             
            </Route>
            <Route exact path='/message/*' element={<Message/>}>
              
            </Route>
            <Route exact path='/me/*' element={<PersonalCenter/>}>
              
            </Route>
          </Routes>
        </div>
        <div className='bottom'>
          <Bottom />
        </div>
      </div>
    </Router>
  )
}

home component:

import Sidebar from "./sidebar-link"
import './index.scss'
import Content from './content-router'
export default function Home() {
    return (
    <div className="connor-body-wrapper">
      <div  className="connor-sidebar-wrapper">
        <Sidebar/>
      </div>
      <div className="connor-content-wrapper">
        <Content  />
      </div>
    </div>)
  }

content compoent:

import React from 'react';
import {
    MemoryRouter as Router,
    Route,
    Routes
} from 'react-router-dom'
import Menu from './content/menu';
import Nutrient from './content/nutrient';
import Thought from './content/thought';

export default function Content() {
  return (
        <Routes>
            <Route exact path='/menu' element={<Menu/>}/>
            <Route exact path='/nutrient' element={<Nutrient/>}/>
            <Route exact path='/thought' element={<Thought/>}/>
        </Routes>
    )
}

The parent router is the bottom tab; the child router is the left sidebar. When I click the child link (left side bar ), I want the parent router(the bottom tab ) UI to disappear, because I want to improve user experience with bigger screen by remove the parent UI .

react-router-dom react-router reactjs user-interface
1 Answers

If I understand your question correctly, you are wanting to conditionally render the the bottom navigation/component depending on whether or not the user is on a root path or in a nested path. For this I suggest using layout components that render the UI and layout as you desire and renders nested Route components into an Outlet.

Read more about Layout Routes

The idea is to create 2 layouts, one with the bottom component and the other without.

const FullLayout = () => (
  <>
    <div className="body">
      <Outlet />
    </div>
    <div className="bottom">
      <Bottom />
    </div>
  </>
);

const BottomlessLayout = () => (
  <div className="body">
    <Outlet />
  </div>
);

Now you'll need to split up the route paths, the paths exactly matching the roots go into the FullLayout component, while the nested paths into the other.

<Router initialEntries={["/home"]}>
  <div className="app">
    <div className="top">
      <NavBar>配合路由使用</NavBar>
    </div>
    <Routes>
      <Route element={<FullLayout />}>
        <Route path="/home" element={<Home />} />
        <Route path="/todo" element={<Todo />} />
        <Route path="/message" element={<Message />} />
        <Route path="/me" element={<PersonalCenter />} />
      </Route>
      <Route element={<BottomlessLayout />}>
        <Route path="/home/*" element={<Home />} />
        <Route path="/todo/*" element={<Todo />} />
        <Route path="/message/*" element={<Message />} />
        <Route path="/me/*" element={<PersonalCenter />} />
      </Route>
      <Route path="*" element={<Navigate to="/home" replace />} />
    </Routes>
  </div>
</Router>

Demo

Edit in-nested-router-i-want-the-father-router-to-disappear-when-i-click-child-route

user_86908570
Related