如何 1). 放一個 div，2)。 渲染一個內部沒有路由的組件<routes>在 v6 React 中使用 React Router？</routes>

Question

我想在 <Routes> 中放置一個 div，並在<Routes> <Routes>中渲染一個<Topbar />和<Sidebar />組件，而不為它們添加<Route>標簽。

我的代碼如下：-

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="login" element={<Login />} />
        <Topbar />
        <div className="container">
          <Sidebar />
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </div>
      </Routes>
    </Router>
  );
};

我想為所有路線實施<Topbar />和<Sidebar /> 。 但對於登錄頁面的例外情況（ Topbar和Sidebar不應顯示在登錄頁面上）。 這就是為什么我將登錄路由放在Topbar和Sidebar的頂部。

控制台顯示錯誤為：

未捕獲的錯誤：[Topbar] 不是<Route>組件。 <Routes>的所有子組件必須是<Route>或<React.Fragment>

如何實現這個功能？

Answer 1

在react-router-dom v6 中，只有Route和React.Fragment組件是Routes組件的有效子組件。

使用布局組件來渲染Topbar和Sidebar組件，以及用於嵌套路由的Outlet ，用於您要渲染這些組件的路由。

例子：

import { Routes, Route, Outlet } from 'react-router-dom';

const Layout = () => (
  <>
    <Topbar />
    <div className="container">
      <Sidebar />
      <Outlet />
    </div>
  </>
);

const App = () => {
  return (
    <Router>
      <Routes>
        <Route path="/login" element={<Login />} />
        <Route element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="users" element={<UserList />} />
        </Route>
      </Routes>
    </Router>
  );
};

Answer 2

像下面這樣改變你的路線，

您需要檢查用戶是否登錄，如果用戶登錄使用 Tobbar、Sidebar 等，否則只返回登錄路由

  const App = () => {
  const [isLogin, setIsLogin] = useState(false)


   return (
    <Router>
    <Routes>
   { isLogin ? <Topbar />
     <div className="container">
       <Sidebar />
      <Route path="/" element={<Home />} />
      <Route path="users" element={<UserList />} />
    </div> : <Route path="login" element={<Login />} />
  
  </Routes>
  </Router>
);
};