Question

我是新来对钩子做出反应的人。我正在为我的项目之一使用react-hook。我使用的是 hookrouter 软件包，但我尝试搜索该问题，但没有发现太多。

我想要什么？

我正在尝试获取当前的URL路径。例如对于https://example.com/users/temp，我想获得/users/temp。

任何帮助将不胜感激。预先感谢！

Answer 1

我想让您知道，还有一种通用的方法可以使用Javascript返回路径，以防您不在其他项目上使用hookrouter

只需调用window.location.pathname

我正在使用它来为Nav组件中的链接设置活动className，它基于客户端使用三元表达式的路线。示例：

const NavList = props => {
    return (
        <NavContainer>
            <ul>
                {routes.map(({ key, href, label }) => (
                    <A href={href} key={key} className='route-link'>
                        <li
                            className={href === window.location.pathname ? 'active' : null}
                        >
                            {label}
                        </li>
                    </A>
                ))}
            </ul>
        </NavContainer>
    );
};

Answer 2

我找到了这个https://github.com/Paratron/hookrouter/blob/master/src-docs/pages/en/04_other-features.md#using-the-uri-path。

import {usePath} from 'hookrouter';

const PathLabel = () => {
    const path = usePath();
    return <span>Your current location: {path}</span>;
}

如何在React中使用钩子路由器获取当前的URL路径？

2 个答案: