Estoy usando react-router-dom 6.3.0. A continuación se muestran mis rutas dentro del componente de la aplicación
<BrowserRouter> <Routes> <Route path='/article/*' element={<Article />} /> </Routes> </BrowserRouter> Cuando se me redirige a la ruta /article/something , aparece el siguiente error.
Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') at resolveTo (index.js:372:1) at index.js:649:1 at mountMemo (react-dom.development.js:17080:1) at Object.useMemo (react-dom.development.js:17546:1) at useMemo (react.development.js:1602:1) at useResolvedPath (index.js:649:1) at useHref (index.js:463:1) at LinkWithRef (index.js:188:1) at renderWithHooks (react-dom.development.js:16186:1) at updateForwardRef (react-dom.development.js:19960:1) at beginWork (react-dom.development.js:22312:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4110:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4159:1) at invokeGuardedCallback (react-dom.development.js:4221:1) at beginWork$1 (react-dom.development.js:27188:1) at performUnitOfWork (react-dom.development.js:26325:1) at workLoopSync (react-dom.development.js:26238:1) at renderRootSync (react-dom.development.js:26207:1) at performSyncWorkOnRoot (react-dom.development.js:25850:1) at flushSyncCallbacks (react-dom.development.js:12072:1) at flushSync (react-dom.development.js:25969:1) at Object.scheduleRefresh (react-dom.development.js:27536:1) at react-refresh-runtime.development.js:299:1 at Set.forEach (<anonymous>) at Object.performReactRefresh (react-refresh-runtime.development.js:288:1) at RefreshUtils.js:65:1El componente Mi artículo se ve a continuación.
import { useLocation } from 'react-router-dom'; export const Article = () => { const { pathname } = useLocation(); console.log({pathname}); // This logs out pathname const articleUrl = pathname.replace('/article/', ''); // I think this is where the error is. return ( <>Article Component</> ); } El resto de la aplicación funciona bien, pero cuando me redirigen al Article component recibo este error. ¿Dónde estoy cometiendo un error y cómo puedo resolver esto?
Supongo que el problema está ocurriendo debido a un comportamiento no async . Su reemplazo se activa antes de que obtenga el nombre de pathname . Intenta crear lógica con useState y useEffect como este
import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; export const Article = () => { const [articleUrl, setArticleUrl] = useState(''); const { pathname } = useLocation(); console.log({pathname}); // This logs out pathname useEffect(() => { if(pathname){ setArticleUrl(pathname.replace('/article/', '')) } }, [pathname]) return ( <>{articleUrl}</> ); }import { useLocation } from 'react-router-dom'; export const Article = () => { const { pathname } = useLocation(); useEffect(()=>{ if(pathname){ const articleUrl = pathname.replace('/article/', ''); console.log(articleUrl); } },[pathname]); return ( <>Article Component</> ); }