如何在没有参数的情况下获得反应路由器源网址？

Question

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!

Answer 1

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

Answer 2

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

Answer 3

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