reading pathname from undefined using react router dom 6.3.0

Question

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?

Answer 1

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

Answer 2

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