获取Deno Fresh的路径名

huangapple go评论79阅读模式
英文:

Deno Fresh getting pathname

问题

我对deno和Fresh框架都不太熟悉(在Google上查找答案确实有点困难)。我想要使导航链接在与路径名匹配时具有不同的背景颜色。

这是我尝试过的代码:

  1. const NavLink = ({ href, children }: NavLinkProps) => {
  2. const isActive = location.pathname === href
  3. const bgClass = isActive ? tw`bg-gray-900` : tw`bg-transparent`
  4. return (
  5. <a
  6. href={href}
  7. className={tw`px-3 py-2 rounded-md text-sm font-medium text-white ${bgClass}`}
  8. >
  9. {children}
  10. </a>
  11. )
  12. }

但是location是未定义的...

英文:

I'm quite new to deno and the Fresh framework (which is really hard to google for answers). I wanna make a nav link a different background color of it matches the pathname

this is what I tried:

  1. const NavLink = ({ href, children }: NavLinkProps) =&gt; {
  2. const isActive = location.pathname === href
  3. const bgClass = isActive ? tw`bg-gray-900` : tw`bg-transparent`
  4. return (
  5. &lt;a
  6. href={href}
  7. className={tw`px-3 py-2 rounded-md text-sm font-medium text-white ${bgClass}`}
  8. &gt;
  9. {children}
  10. &lt;/a&gt;
  11. )
  12. }

But location is undefined..

答案1

得分: 1

你可以从 PageProps.url 获取当前URL数据并传递给你的组件。

来自文档

实际上,PageProps接口包含了许多有用的属性,可以用来自定义渲染输出。除了匹配的URL模式参数外,原始URL和路由名称也可以在这里找到。

  1. const NavLink = ({ href, children, location }: NavLinkProps) => {
  2. const isActive = location.pathname === href
  3. const bgClass = isActive ? tw`bg-gray-900` : tw`bg-transparent`
  4. return (
  5. <a
  6. href={href}
  7. className={tw`px-3 py-2 rounded-md text-sm font-medium text-white ${bgClass}`}
  8. >
  9. {children}
  10. </a>
  11. )
  12. }
  13. export default function Page(props: PageProps) {
  14. return (
  15. <div>You are on the page '{props.url.href}'.
  16. <NavLink href="/foo" children="Foo" location={props.url} />
  17. </div>
  18. )
  19. }
英文:

You can get current URL data from PageProps.url and pass it to your component.

From the docs

> The PageProps interface actually contains a bunch of useful properties
> that can be used to customize the rendered output. Next to the matched
> url pattern parameters, the raw url, and the route name can also be
> found in here.

  1. const NavLink = ({ href, children, location }: NavLinkProps) =&gt; {
  2. const isActive = location.pathname === href
  3. const bgClass = isActive ? tw`bg-gray-900` : tw`bg-transparent`
  4. return (
  5. &lt;a
  6. href={href}
  7. className={tw`px-3 py-2 rounded-md text-sm font-medium text-white ${bgClass}`}
  8. &gt;
  9. {children}
  10. &lt;/a&gt;
  11. )
  12. }
  13. export default function Page(props: PageProps) {
  14. return (
  15. &lt;div&gt;You are on the page &#39;{props.url.href}&#39;.
  16. &lt;NavLink href=&quot;/foo&quot; children=&quot;Foo&quot; location={props.url} /&gt;
  17. &lt;/div&gt;
  18. )
  19. }

huangapple
  • 本文由 发表于 2023年5月25日 16:44:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/76330393.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定