如果其他条件在ReactJ中使用变量，如何使用

发布于 2025-02-13 21:59:14 字数 462 浏览 0 评论 0原文

我正在ReactJs工作。现在，我获得了当前的url/hostName。现在，我想使用此URL具有IF-ELSE条件，这意味着如果url =“/”（主页），我只想显示第一个标头，则应显示第二个单词。换句话说，我想知道如何将IF-ELSE条件与动态变量一起使用？这是我当前的代码

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>
   </>
    )

原文

I am working in Reactjs. Right now I am getting the current url/hostname. Now I want to use this URL with an if-else condition, which means I just want if url="/"(home page) then the 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>
   </>
    )

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

旧时模样 2025-02-20 21:59:15

您可以在此处使用三元运算符来渲染，例如：

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

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

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>
   </>
    )
}

回复收藏 0 原文

小鸟爱天空丶 2025-02-20 21:59:15

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>
   </>
    )
}

您使用两种方法

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

回复收藏 0 原文

~没有更多了~