mirror of
https://github.com/blakeblackshear/frigate.git
synced 2024-11-21 19:07:46 +01:00
6e53c109b6
When serving Frigate at a subpath, the paths that show in the URL bar and that wind up in your browser history are anchored at the web root. I.e. you go to `https://example.com/frigate/`, it changes to `https://example.com/`, and clicking around works as expected, but the `frigate/` prefix is gone. It's confusing if you don't know that the URL's are entirely virtual. Also, your browser history is useless, since the URL's point to e.g. `https://example.com/#kitchen`, but visiting that URL will not hit `/frigate/` at all. Most of the work is already done. Nginx injects javascript to set `window.baseURL` based on the X-Ingress-Path header. This change passes that to BrowserRouter, so that it'll be part of the URL's it shows. Fixes #4526
66 lines
2.6 KiB
TypeScript
66 lines
2.6 KiB
TypeScript
import Providers from "@/context/providers";
|
|
import { BrowserRouter, Routes, Route } from "react-router-dom";
|
|
import Wrapper from "@/components/Wrapper";
|
|
import Sidebar from "@/components/navigation/Sidebar";
|
|
|
|
import { isDesktop, isMobile } from "react-device-detect";
|
|
import Statusbar from "./components/Statusbar";
|
|
import Bottombar from "./components/navigation/Bottombar";
|
|
import { Suspense, lazy } from "react";
|
|
import { Redirect } from "./components/navigation/Redirect";
|
|
import { cn } from "./lib/utils";
|
|
import { isPWA } from "./utils/isPWA";
|
|
|
|
const Live = lazy(() => import("@/pages/Live"));
|
|
const Events = lazy(() => import("@/pages/Events"));
|
|
const Exports = lazy(() => import("@/pages/Exports"));
|
|
const SubmitPlus = lazy(() => import("@/pages/SubmitPlus"));
|
|
const ConfigEditor = lazy(() => import("@/pages/ConfigEditor"));
|
|
const System = lazy(() => import("@/pages/System"));
|
|
const Settings = lazy(() => import("@/pages/Settings"));
|
|
const UIPlayground = lazy(() => import("@/pages/UIPlayground"));
|
|
const Logs = lazy(() => import("@/pages/Logs"));
|
|
|
|
function App() {
|
|
return (
|
|
<Providers>
|
|
<BrowserRouter basename={window.baseUrl}>
|
|
<Wrapper>
|
|
<div className="size-full overflow-hidden">
|
|
{isDesktop && <Sidebar />}
|
|
{isDesktop && <Statusbar />}
|
|
{isMobile && <Bottombar />}
|
|
<div
|
|
id="pageRoot"
|
|
className={cn(
|
|
"absolute right-0 top-0 overflow-hidden",
|
|
isMobile
|
|
? `bottom-${isPWA ? 16 : 12} left-0 md:bottom-16 landscape:bottom-14 landscape:md:bottom-16`
|
|
: "bottom-8 left-[52px]",
|
|
)}
|
|
>
|
|
<Suspense>
|
|
<Routes>
|
|
<Route path="/" element={<Live />} />
|
|
<Route path="/events" element={<Redirect to="/review" />} />
|
|
<Route path="/review" element={<Events />} />
|
|
<Route path="/export" element={<Exports />} />
|
|
<Route path="/plus" element={<SubmitPlus />} />
|
|
<Route path="/system" element={<System />} />
|
|
<Route path="/settings" element={<Settings />} />
|
|
<Route path="/config" element={<ConfigEditor />} />
|
|
<Route path="/logs" element={<Logs />} />
|
|
<Route path="/playground" element={<UIPlayground />} />
|
|
<Route path="*" element={<Redirect to="/" />} />
|
|
</Routes>
|
|
</Suspense>
|
|
</div>
|
|
</div>
|
|
</Wrapper>
|
|
</BrowserRouter>
|
|
</Providers>
|
|
);
|
|
}
|
|
|
|
export default App;
|