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

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 .

CodePudding user response：

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.