Блог

Я хочу указать исходный URL-путь без параметров маршрутизатора.

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

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

помогите мне!

Вы можете исключить все параметры из текущего пути, используя этот хук:

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

Используйте его таким образом в своем компоненте:

 const basePath = useBasePath();

console.log(basePath);
  

Если я правильно понимаю, вы хотите извлечь путь текущего маршрута, исключая последнюю userId часть URL-адреса — предполагая, что это так, вы могли бы сделать следующее:

 const getCurrentPathWithoutLastPart = () => {

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

Если ваш текущий URL-адрес выглядит примерно так, /users/userDetail/some_value вызов функции даст /users/userDetail :

 getCurrentPathWithoutLastPart() // returns /users/userDetail
  

Существующее решение полезно, но оно работает не для всех сценариев. Например, мы не можем использовать его для родительского пути, поскольку он вернет пустую строку.

Добавление к существующему решению:

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