I am working on a web app that is consisted of few pages and have configured routes with react-route-dom. On the pages, I have some shared components and I want them to be styled differently on other pages except the Home page.

How do I get this done? Any help? Thanks

CodePudding user response：

Check if pathname is path of home or else not you can use useLocation to get the pathname and add conditional styling or classes.

useLocation v5
useLocation v6

import React from 'react';
import {useLocation} from 'react-router-dom';

export const Common_Component=()=>{
const location=useLocation()
const pathname=location.pathname

return(
    <div>
        <div classes={pathname=="home"?"home_class":"other_class"}>
         ...
        </div>
    </div>
    )
}

Or

You can pass boolean props to the component to let component know it should use home bases classes or other classes.

PS.

• you will still need to do conditional check if props is true or false
• useMatch you can use useMatch to match the current url with regex.

CodePudding user response：

While it is always good to share code, I would recommend creating a new component for the homepage. Otherwise you are coupling your components. What happens if you want to add another specialisation for the whatever-component? You add another case! Your components grow and wire up more and more until you have one big pot of spaghetti. Hence, it makes sense in many situations to just create a new component for a new use-case.