I am using react-router-dom 6.3.0. Below are my routes inside App component
<BrowserRouter>
<Routes>
<Route path='/article/*' element={<Article />} />
</Routes>
</BrowserRouter>
When I am redirected to /article/something route I get below 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:1
My Article component looks like below.
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</>
);
}
The rest of the application works fine but when I am routed to Article component then I am getting this error. Where am I making mistake and how can I solve this?
I guess problem is happening because of non async behaviour. Your replace gets triggered before you get pathname. Try to create logic with useState and useEffect like this
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</>
);
}