Rendern von Komponenten mit unterschiedlichen Layouts/Elementen mit React-Router-Dom v6: Wie kann ich das erreichen?-Fragen und Antworten zum chinesischen PHP-Netzwerk

Ich habe Probleme beim Schreiben von Code zum Rendern einer Anmeldeseite ohne Navigationsleiste und Seitenleiste. Ich bin auf ein paar Seiten gestoßen, auf denen ähnliche Fragen gestellt wurden, aber keine scheint zu meiner aktuellen Situation zu passen.

So verbergen Sie die Navigationsleiste auf der Anmeldeseite des React-Routers Die angegebenen Beispiele sind großartig, aber ich glaube, dass sich die Art und Weise, dieselbe Aufgabe zu erfüllen, mit „react-router-dom v6“ geändert hat, was mich zu https://dev.to/iamandrewluca/private-route-in-react-Lesen führt diese Änderung in router-v6-lg5

Sieht so aus, als ob ich etwas über das React Router-Routing nicht verstehe. Im folgenden Code habe ich zwei Routen. Ich möchte eine der Routen (Anmeldung) ohne Navigationsleisten- und Seitenleistenkomponenten rendern.

const App = () => { return ( <>  } />       } />  
 
  ); };

Eine andere Option, die ich ebenfalls ausprobiert habe, bestand darin, die Navigationsleisten- und Seitenleistenbeschriftungen in eine Dashboard-Komponente zu verschieben, aber dann muss ich im Grunde das gleiche Kopieren und Einfügen mit jeder neuen Komponente durchführen. Dieser Ansatz fühlt sich falsch und ineffizient an, aber wenn es der richtige Ansatz ist, werde ich das Notwendige tun

BEARBEITEN: Ich denke, es ist wichtig einzubeziehen, dass es derzeit nur die Anmeldeseite lädt, die die Navigationsleiste und die Seitenleiste enthält. Die Komponente „Navigation zum Dashboard“ verfügt über eine Navigationsleiste und eine Seitenleiste, dies ist jedoch beabsichtigt. Ich möchte, dass die Anmeldeseite keine Navigationsleiste und Seitenleiste hat

Antworte allen (2)

P粉4914214132023-10-25 17:29:41 2 Etage

隐藏导航栏的最简单方法是转到登录页面组件并调用 useLocation()。然后，在声明使用位置后，您将执行类似的操作。并将其分配给可变位置 { location.pathname === "/login" ?空：（

渲染整个导航栏组件）；

如果你能在我用手机打字时阅读，那就不行了

Wie+0

Antwort hinzufügen

P粉2486022982023-10-25 10:27:05 1 Etage

如果我理解您的问题，您希望在非登录路线上呈现导航和侧边栏。为此，您可以创建一个布局组件来呈现它们和嵌套路由的出口。

使用嵌套路由

import { Outlet } from 'react-router-dom'; const AppLayout = () => ( <>      // <-- nested routes rendered here 
 
  ); const App = () => { return ( <>  } /> } > } /> // <-- nested routes    ); };

使用路由配置和`useRoutes`挂钩

const routesConfig = [ { path: "/login", element: , }, { element: , children: [ { path: "/", element: , }, ], }, ];

...

import { useRoutes } from 'react-router-dom'; const App = () => { const routes = useRoutes(routesConfig); return routes; };

使用路由配置和数据路由器（在 v6.4.0 中引入）

import { createBrowserRouter, RouterProvider } from 'react-router-dom'; const router = createBrowserRouter(routesConfig); const App = () => { return ; };