Next.js: Change Div color of header depending on active pgae

Question

In My Next.js project I've made a simple Layout.js which contains the following code:

import { Fragment } from "react";

import Header from "./Header/Header";
import Footer from "./Footer/Footer";

function Layout(props) {
    return (
        <Fragment>
            <Header />
            {props.children}
            <Footer />
        </Fragment>
    );
}

export default Layout;

Then I've changed the _app.js file to the following:

import Layout from "../components/Layout/Layout";

import "bootstrap/dist/css/bootstrap.min.css";
import "../styles/globals.css";

function MyApp({ Component, pageProps }) {
    return (
        <Layout>
            <Component {...pageProps} />
        </Layout>
    );
}

export default MyApp;

So now every page in my website will have the header (and footer).

If I navigate to the results page for example my header will show up as expected:

But I would like to change the color of the div that contains the RESULTS text to be [for example] red.

I know that one way to do it would be to pass the header in each page and pass a prop to it that will indicate which div to change its color. However I'm wondering if there's a way to achieve that result with my current Layout.js since I don't want to pass the header to each page.

Answer 1

try this method:

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