How can i extract react route pathname in the queryString url?

Question

Here i am having a path like this and getting it from useLocation hook:

function usePageViews() {
  let location = useLocation()

  React.useEffect(
    () => {
      GApageView(location.pathname)
    },
    [location]
  )
}

let path1 = /account/forgotPassword/eyJhbGciOiJIUzUxMiJ9.ir1AeAKLZexUzGhjJvBuzm9jkqZahLAbRwTmOAjB8ZMpj3QLtkpymFwATNb_rP4fu0YgbRT4H9jetszOOSLEsg/ab/en/

in this above value , i need to get only the path route Eg:

Result:

/account/forgotPassword

in someScenarios , the paths will be like this

let path1 = /account/login
let path2 = /

For this i need to get the value as it is.

Is there anyway i can achieve this.Please help me with this. Thanks in advance

CevaComic · Accepted Answer · 2020-07-03 04:28:55Z

1

You can use the useLocation hook from react router:

import { useLocation } from 'react-router-dom'
...
const location = useLocation()
console.log('Path:',location.pathname)

answered Jul 3, 2020 at 4:28

CevaComic

2,1142 gold badges9 silver badges14 bronze badges

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

2 Comments

SDK Over a year ago

Hi, thanks for the reply. I am getting the value like this only. location.pathname will give the entire pathname. In this i want to get rid of that queryString.

CevaComic Over a year ago

Well , when you send the queryString, try adding ?key=string, and you can use path.split('?')[0], to get the pathname only. If you already know that your path is 2 parts only , use split to get what you need.

Guru Hadadi · Accepted Answer · 2020-07-03 05:02:30Z

0

Ideally you need to pass token, country, lang as query params. You can then simply use useRouteMatch

working demo

Component

const Login = props => {
  const match = useRouteMatch();

  return <div>{match.path.split(":")[0]}</div>;
};

Route

<Switch>
          <Route path="/home" exact component={Home} />
          <Route
            path="/account/login/:token/:country/:lang/"
            exact
            component={Login}
          />
        </Switch>

Nav

     <Link
        className={
          "tab " + currentRoute.includes("contact") ? "tab active" : "tab"
        }
        to="/account/login/eyJMiJ9.ir1LtEsg/ab/en/"
      >
        Login
      </Link>

answered Jul 3, 2020 at 5:02

Guru Hadadi

13.8k2 gold badges18 silver badges29 bronze badges

Collectives™ on Stack Overflow

How can i extract react route pathname in the queryString url?

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related