如何使用反应路由器 v6 获取当前 URL 的最后一部分？

Question

如何使用反应路由器 v6 获得当前 url 的最后一部分？

例如：

如果当前路径是https://localhost:4200/example/example-details ，那么我想这样检查

const location = useLocation();

if (location.pathname === '/example-details')) {
  // do some stuff here
}

..但这总是返回完整路径。

它适用于location.pathname.includes('/example-details') ，但我很好奇是否有反应路由器的方法，就像 Angular 路由器一样。

Answer 1

检查

location.pathname.includes('/example-details')

Answer 2

const location = useLocation();
const [pathName, setPathName] = useState(null) ;

useEffect(() => {
    if(location) {
        let tmp = location.pathName.slice(location.pathName.lastIndexOf("/") , location.pathName.length) ;
        setPathName(tmp) ;
    }
}, [location])

Answer 3

const match = useMatch('/example/:lastPart')
const value = match?.props.lastPart;
if (!!value) {
    // do some stuff here
}

使用 useMatch，您可以将模板应用于当前位置，并在返回的 object 中提取一些部分作为道具。