Mantenga una colección estática de rutas rojas y úsela en su cheque. Por ejemplo

 // route-styles.js export const RED_ROUTES = new Set([ "/browse", "/some-other-route", // etc ]);

 // Header.jsx import { useRouter } from "next/router"; import { RED_ROUTES } from "./route-styles"; function Header() { const router = useRouter(); return ( <ul> <li style={{ color : RED_ROUTES.has(router.route) ? "red" : "black" }} >Resut</li> </ul> ); }

Otra opción podría ser crear un mapa de rutas para colorear. Eso le permitiría usar más que solo las dos opciones.

 // route-styles.js export const COLORS = { "/browse": "red", "/some-other-route": "red", "/the-blue-one": "blue" };

y en tu componente...

 <li style={{ color: COLORS[router.route] ?? "black" }} >

¿Tal vez una matriz funcionaría?

 import { useRouter } from "next/router"; import styled from "styled-components"; function Header() { const router = useRouter(); const theRoutes = ["home", "browser", "view", "about"] return ( <> <ul> {theRoutes.map(route => <li style={{ color: router.route === route ? "red" : "black" key={route}>{route}</li> )} </ul> </> ) }

Podrías pasar un apoyo al encabezado de la página

 export function Page () { return ( <MainPage> // if you have BaseLayout you have to pass it to Baselayout and from there to Header // addiing only `red` prop will be evaluated red=True <Header red /> <MainPage/> ) }

en tu encabezado

 <li style={{ color : props.red ? "red" : "black" }}>Resut</li>