Mercy Posts - Answer Overflow

Mercy

•Created by Mercy on 2/27/2024 in #support

Modifying <body> tag

I am trying to figure out how to modify the body tag to remove a certain class for certain pages to no avail. The class needs to be removed from the body for pages that do not have a sidebar.

function NavbarSpacer() {
    const removeClass = () => {
        /// check if body has the class
        let hasClass = document.body.classList.contains("ps-lg-sbwidth");

        // get current url
        const url = window.location.pathname;
        if (url === "/login" || url === "/registration") {
            if (hasClass) {
                document.body.classList.remove("ps-lg-sbwidth");
            }
        } else if (!hasClass) {
            document.body.classList.add("ps-lg-sbwidth");
        }
    };

    removeClass();

    return (
        <>
        </>
    );
}

export default NavbarSpacer;

function NavbarSpacer() {
    const removeClass = () => {
        /// check if body has the class
        let hasClass = document.body.classList.contains("ps-lg-sbwidth");

        // get current url
        const url = window.location.pathname;
        if (url === "/login" || url === "/registration") {
            if (hasClass) {
                document.body.classList.remove("ps-lg-sbwidth");
            }
        } else if (!hasClass) {
            document.body.classList.add("ps-lg-sbwidth");
        }
    };

    removeClass();

    return (
        <>
        </>
    );
}

export default NavbarSpacer;

this only works when i load a page for the first time or refresh

2 replies

SSolidJS

•Created by Mercy on 2/27/2024 in #support

Anchor doesn't load the page

The anchor tag doesn't seem to want to load the page for me. I have a core router in the index.jsx file

render(
  () => (
    <Router>
      <Route path="*" component={RootRouter} />
    </Router>
  ),
  app
);

render(
  () => (
    <Router>
      <Route path="*" component={RootRouter} />
    </Router>
  ),
  app
);

This is how my root router looks

function NotFound() {
    return (
        <h1>404</h1>
    );
}

export default function RootRouter() {
    return (
        <Router>
            <Route path="/" component={Home} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/dashboard/*" component={Dashboard} />
            <Route path="*404" component={NotFound} />
        </Router>
    );
}

function NotFound() {
    return (
        <h1>404</h1>
    );
}

export default function RootRouter() {
    return (
        <Router>
            <Route path="/" component={Home} />
            <Route path="/dashboard" component={Dashboard} />
            <Route path="/dashboard/*" component={Dashboard} />
            <Route path="*404" component={NotFound} />
        </Router>
    );
}

and this is the dashboard

export default function Dashboard() {
    return (
        <div>
            <Sidebar></Sidebar>
            <Navbar></Navbar>

            <Router>
                <Route path="/dashboard/test1" component={partialRouterTest1} />
                <Route path="/dashboard/test2" component={partialRouterTest2} />
                <Route path="*" component={fallback} />
            </Router>
        </div>
    );
}

export default function Dashboard() {
    return (
        <div>
            <Sidebar></Sidebar>
            <Navbar></Navbar>

            <Router>
                <Route path="/dashboard/test1" component={partialRouterTest1} />
                <Route path="/dashboard/test2" component={partialRouterTest2} />
                <Route path="*" component={fallback} />
            </Router>
        </div>
    );
}

I have a navbar that has links to /dashboard/test1 and 2 and 3 for the fallback the anchor tags work as it it changes the url but the content doesn't seem to update also another question: is this a good way to use routers as i used express routers with ejs before this for years and i could just do

/*, router
/dashboard, router
/test1
/test2

/*, router
/dashboard, router
/test1
/test2

20 replies

Gaming

Programming