React-cookie, removeCookie doesn't work when url have dynamic url or more than two depth url with url access, not by react -router-dom

[songjihyeok]

   "react": "^18.2.0"
   "react-router-dom": "5.1.2"
   "react-cookie": "^4.1.1"

When we use dynamic url or more than two depth url, the removeCookie doesn't work. In the condition that if we access to the page by the URL. Not by the react-router-dom.

For example, we often try to access to the url like "URL/report/:reportId", "URL/report/reportDetail". Also we want to access to the page in url. Because we want to share the specific report. When we access to the url with authorized token, we can access to the page.

However, when we try to logout, The removeCookie doesn't work. here is the code.

Router.js

 <BrowserRouter>
            <Switch> 
                 {.......other routers.......}
                <AuthorizedRouter exact path="/report/reportDetail/:reportId" component={<ReportDetail/>} /> // This router check the token is valid
                <AuthorizedRouter exact path="/reportList" component={<ReportList/>} />
            </Switch>
</BrowserRouter>

ReportDetail.js

import {useCookie} from "react-cookie"

 const ReportDetail = ()=> { 
const [,,removeCookie] = useCookie();

const onLogout = ()=>{
    removeCookie("loginToken")
}

return <div> 
   <button onClick={onLogout}/>
</div>
}

Now, the removeCookie doesn't work at all.
However in the same logic with different url like "/reportList" which has just one depth Url. The removeCookie works well even though we accessed to the page in url.

I don't know why this bug happen. So i just used the vanilla way to remove the cookie

const onLogout = ()=>{ document.cookie = "loginToken=; expires=0; path=/;"; }
It works, but i don't like to use vanilla way in react. Is there any proper solution with this problem?

[eXon]

You need to make sure to set the path to / when calling removeCookie. Here, you are including it in the vanilla javascript version, but not in the React version.