fix Cloudflare setup route matching by wrapping routes in Switch

The specific route /settings/cloudflare was being matched by the dynamic
route /settings/:serviceId despite being defined first. IonRouterOutlet
doesn't always respect route ordering for exact matches. Wrapping routes
in Switch ensures the specific route is matched before the dynamic one.

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2026-02-06 19:59:24 +01:00
parent ceabfa4848
commit bbaf629907

View File

@@ -15,7 +15,7 @@ import {
libraryOutline,
settingsOutline,
} from "ionicons/icons";
import { Redirect, Route } from "react-router-dom";
import { Redirect, Route, Switch } from "react-router-dom";
import DiscoverPage from "./pages/Discover/DiscoverPage";
import HomePage from "./pages/Home/HomePage";
@@ -33,24 +33,26 @@ export default function App() {
<IonReactRouter basename="/whattoplay">
<IonTabs>
<IonRouterOutlet>
<Route exact path="/home" component={HomePage} />
<Route exact path="/library" component={LibraryPage} />
<Route exact path="/playlists" component={PlaylistsPage} />
<Route exact path="/discover" component={DiscoverPage} />
<Route exact path="/settings" component={SettingsPage} />
<Route
exact
path="/settings/cloudflare"
component={CloudflareSetupPage}
/>
<Route
exact
path="/settings/:serviceId"
component={SettingsDetailPage}
/>
<Route exact path="/">
<Redirect to="/home" />
</Route>
<Switch>
<Route exact path="/home" component={HomePage} />
<Route exact path="/library" component={LibraryPage} />
<Route exact path="/playlists" component={PlaylistsPage} />
<Route exact path="/discover" component={DiscoverPage} />
<Route exact path="/settings" component={SettingsPage} />
<Route
exact
path="/settings/cloudflare"
component={CloudflareSetupPage}
/>
<Route
exact
path="/settings/:serviceId"
component={SettingsDetailPage}
/>
<Route exact path="/">
<Redirect to="/home" />
</Route>
</Switch>
</IonRouterOutlet>
<IonTabBar slot="bottom">