Question

我想在没有路由器参数的情况下生成url路径。

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

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

救救我！

Answer 1

您可以使用此钩子从当前路径名中排除所有参数：

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

Answer 2

如果我的理解正确，您想提取当前路线的路径，同时排除URL的最后userId部分-假设是这种情况，您可以执行以下操作：

const getCurrentPathWithoutLastPart = () => {

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

如果您当前的网址类似于/users/userDetail/some_value，则调用该函数将产生/users/userDetail：

getCurrentPathWithoutLastPart() // returns /users/userDetail

Answer 3

现有的解决方案很有用，但并非在所有情况下都适用。例如，我们不能将其用作父路径名，因为它将返回空字符串。

添加到现有解决方案中：

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

如何获得没有参数的React路由器原始网址？

3 个答案: