How to get the current url path using hook router in react?

Question

I'm new to react and react hooks. I'm using hookrouter package and I tried to googling about the question, but didn't find much about it.

What I want?

I'm trying to get the current url path. For e.g. for https://example.com/users/temp, I want to get /users/temp.

Any help will be appreciated. Thanks in advance!

Dhruvil21_04 · Accepted Answer · 2020-04-18 00:46:27Z

6

I finally found on github doc.

import {usePath} from 'hookrouter';

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

edited Apr 18, 2020 at 0:46

answered Sep 13, 2019 at 2:27

Dhruvil21_04

2,2295 gold badges20 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Avery Freeman · Accepted Answer · 2020-07-19 06:55:38Z

I wanted to let you know there's also a generic way to return the path using Javascript, in case you're not using hookrouter on a different project

Just invoke window.location.pathname

I'm using it for setting active className for links in my Nav component based on which route the client is on using a ternary expression. Example:

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

Collectives™ on Stack Overflow

How to get the current url path using hook router in react?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related