如何使用反應路由器 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 中提取一些部分作為道具。