在嵌套路由器中，我希望在单击子路由器时父路由器消失

Question

顶级：

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

主页组件：

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

内容组成部分：

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

父路由器是底部标签；子路由器是左侧边栏。当我点击子节点 link（左侧栏）时，我希望父路由器（底部选项卡）UI 消失，因为我想通过删除父节点 [=] 来改善更大屏幕的用户体验25=].

Answer 1

如果我对你的问题的理解正确，你想有条件地呈现底部 navigation/component 取决于用户是在根路径上还是在嵌套路径上。为此，我建议使用根据需要呈现 UI 和布局的布局组件，并将嵌套的 Route 组件呈现为 Outlet.

阅读更多关于 Layout Routes

想法是创建 2 个布局，一个有底部组件，另一个没有。

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

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

现在您需要拆分路由路径，完全匹配根的路径进入 FullLayout 组件，而嵌套路径进入另一个.

<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>

演示

在嵌套路由器中，我希望在单击子路由器时父路由器消失

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

user-interface

reactjs

react-router

react-router-dom