如何在3个组件之间使用路由？

Question

我的应用程序设计为： App.js 包含两个路由：

1. 登录并注册
2. 主页。

主页的布局如下： 标头 侧边栏 内容区

页眉和侧边栏组件导入到 home 中。

现在我想要的是，当我单击侧边栏的任何条目时，我希望将其内容加载到内容区域部分中。

我尝试在侧边栏中使用反应路由器的链接，然后在主页上路由到每个菜单页面或组件的链接，但这不起作用。

这是我的App.js

function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<LoginSignup />} />
        <Route path="/home" element={<Home />} />
      </Routes>
    </div>
  );
}

这是我的标题：

const Header = () => {
  return (
    <div className='header-container'>
      <div className='header-wrapper'>
        <div className='header-content'>
          <div className='intro-bar'>
            <h3>SideMenu Name</h3>
            <h2>Welcome, User!</h2>
          </div>
          <hr></hr>
        </div>
      </div>
    </div>
  )
}

这是我的侧边栏：

const Header = () => {

  const handleLogout = () => {
    navigate('/');
  }

 return (
            <div className='sidebar-content-menu'>
              <ul className='menu-list'>
                <div>
                  <li>Item1</li>
                  <li>Item2</li>
                  <li>Item3</li>
                </div>
                <div>
                  <li onClick={handleLogout}>Logout</li>
                </div>
              </ul>
            </div>
  )
}

这是我的家：

const Home = () => {

  const navigate = useNavigate();

  const handleLogout = () => {
    navigate('/');
  }

  return (
    <div className='home-container'>
      <div className='home-wrapper'>
        <div className='home-content'>
          <div className='home-content-side-menu-holder'>
            <h1>ZERO</h1>
            <div className='sidebar-content-menu'>
              <Sidebar/>
            </div>
          </div>
          <div className='home-content-menu-content-section'>
            <Header />
            <div className='side-menu-content-section'>
              <div className='side-menu-content-viewer'>
               //i want my sidemenu links page to be displayed here.
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

目前我已经删除了

      <Routes>
        <Route path="/home/item1" element={<Item1 />} />
        <Route path="/home/item2" element={<Item2/>} />
        <Route path="/home/item3" element={<Item3/>} />
      </Routes>

来自侧边栏导致错误。

Answer 1

问题

问题在于

Home

组件在不允许渲染后代路由的路由路径上呈现。

解决方案

使用下降路线

将通配符

"*"

匹配器附加到主页路径的末尾，以便也可以匹配和渲染后代路由。

示例：

应用程序

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<LoginSignup />} />
        <Route path="/home/*" element={<Home />} />
      </Routes>
    </div>
  );
}

下降路线构建 relative 到其父路线，因此请删除下降路线上的

"/home"

“前缀”。

首页

const Home = () => {
  const navigate = useNavigate();

  const handleLogout = () => {
    navigate("/");
  };

  return (
    <div className="home-container">
      <div className="home-wrapper">
        <div className="home-content">
          <div className="home-content-side-menu-holder">
            <h1>ZERO</h1>
            <div className="sidebar-content-menu">
              <Sidebar />
            </div>
          </div>
          <div className="home-content-menu-content-section">
            <Header />
            <div className="side-menu-content-section">
              <div className="side-menu-content-viewer">
                <Routes>
                  <Route path="/item1" element={<Item1 />} />
                  <Route path="/item2" element={<Item2 />} />
                  <Route path="/item3" element={<Item3 />} />
                </Routes>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

使用嵌套路由

另一种方法是在您想要渲染侧边栏路由的位置渲染

Outlet

，并将它们渲染为 "/home" 下的 嵌套 路由。

应用程序

export default function App() {
  return (
    <div className="App">
      <Routes>
        <Route path="/" element={<LoginSignup />} />
        <Route path="/home" element={<Home />}>
          <Route path="item1" element={<Item1 />} />
          <Route path="item2" element={<Item2 />} />
          <Route path="item3" element={<Item3 />} />
        </Route>
      </Routes>
    </div>
  );
}

首页

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

const Home = () => {
  const navigate = useNavigate();

  const handleLogout = () => {
    navigate("/");
  };

  return (
    <div className="home-container">
      <div className="home-wrapper">
        <div className="home-content">
          <div className="home-content-side-menu-holder">
            <h1>ZERO</h1>
            <div className="sidebar-content-menu">
              <Sidebar />
            </div>
          </div>
          <div className="home-content-menu-content-section">
            <Header />
            <div className="side-menu-content-section">
              <div className="side-menu-content-viewer">
                <Outlet />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};