CODEWITHSUNDEEP
javascriptreactjsreact-router
pyyyyysv
pyyyyysv

Reputation: 1027

how get react router origin url without params?

I want to origin url path without router params.

// routers
<Route
  exact
  path={`/users/userDetail/:userId`}
  component={UserDetail}
/>

i want to get string "/users/userDetail" from some components

help me!

Upvotes: 6

Views: 15042

Answers (5)

Rogers
Rogers

Reputation: 11

Here is my solution hope it helps

export const useRouterPath = () => {
  const location = useLocation();
  const params = useParams<Record<string, string>>();
  return Object.keys(params).reduce((path, param) => {
    const decodedpath = decodeURIComponent(path);
    const replaced = decodedpath.replace("/" + params[param], "");
    return replaced;
  }, location.pathname);
};

Upvotes: 1

jajuo
jajuo

Reputation: 21

The answer from Alecu Marian Alexandru does work for most routes but fails for a special case. If you got a path parameter that is a substring of the route path like:

/category/cat

you'll get

egory/cat

I fixed this by deconstructing the "path parameter string" and "location.pathname string" into arrays and filtering out every path parameter from the location.pathname array:

    export function useRoutePath()
    {
       const location = useLocation();
       const params = useParams<Record<string, string>>()["*"]?.split("/").filter(param => param.length);
       const pathElements = location.pathname.split("/").filter(element => element.length && !params?.includes(element));
       return "/" + pathElements.join("/");
    }

Upvotes: 2

Alecu Marian Alexandru
Alecu Marian Alexandru

Reputation: 715

You can exclude all params from current pathname by using this hook:

import { useLocation, useParams } from 'react-router-dom';

export const useBasePath = () => {
    const location = useLocation();
    const params = useParams<Record<string, string>>();

    return Object.values(params).reduce(
        (path, param) => path.replace('/' + param, ''),
        location.pathname,
    );
};

Use it like this in your component:

const basePath = useBasePath();

console.log(basePath);

Upvotes: 10

Prashant Sharma
Prashant Sharma

Reputation: 31

The existing solution is helpful, but it doesn't work for all scenarios. For example, we can't use it for the parent pathname as it will return empty string.

Adding to the existing solution:

const getCurrentPathWithoutLastPart = () => {
    const pathRgx = /\//g;
    const childroutecount = ((location.pathname || '').match(pathRgx) || []).length
    return childroutecount > 1 ? location.pathname.slice(0, location.pathname.lastIndexOf('/')) : location.pathname;
}

Upvotes: 0

Dacre Denny
Dacre Denny

Reputation: 30390

If I understand correctly, you want to extract the path of the current route, while excluding the last userId part of the URL - assuming that's the case, you could do the following:

const getCurrentPathWithoutLastPart = () => {

    return location.pathname.slice(0, location.pathname.lastIndexOf('/'))
}

If your current URL is something like /users/userDetail/some_value calling the function will yield /users/userDetail:

getCurrentPathWithoutLastPart() // returns /users/userDetail

Upvotes: 3

Related Questions