How to use if else condition with variable in Reactjs-CodePudding

I am working in reactjs,Right now i am getting current "url/hostname",Now i want to use this url with if else condtion,means i just want if url="/"(home page) then first header should display otherwise second word should display,In other words i want to know how we can use if else condition with dynamic variable ? Here is my current code

import { useRouter } from 'next/router'
const Header = () => {
const router = useRouter();
const url =router.asPath;

}
return (
    <>
    <div>
        //need to use if else condition based on "url" variable 
    </div>
   </>
    )

CodePudding user response：

You can use ternary operators there to render based on a condition, like this:

import { useRouter } from 'next/router'
const Header = () => {
const router = useRouter();
const url = router.asPath;

return (
    <>
    <div>
        {url === "something" ? <Foo /> : <Bar />}
    </div>
   </>
    )
}

CodePudding user response：

strong text

import { useRouter } from 'next/router'
const Header = () => {
const router = useRouter();
const url = router.asPath;

return (
    <>
    <div>
        {url === "smth" ? <First /> : <Second />}
    </div>
   </>
    )
}

return (
    <>
    <div>
        {url === "smth" && <First />}
        {url === "smth" && <Second />}
    </div>
   </>
    )
}

you use both methods