React-router v5.2 NavLink 活动未按预期工作

Question

I have routes like "/works/:type/:id". Shouldn't strict match all "/works/whatever/whatever" paths as the last two paths are dynamic values. But this is not the case. I am trying to enforce with isActive as well but no luck with that either. Once ON always ON behaviour kicks in as no reloading happens, Even though with "useEffect" hook, we can detect the URL change and update the isActive correctly. once ON always ON. Can someone put me in the right direction please how to handle this.

`<NavLink
     className="nav-link"
     activeStyle={{ color: "#f5d62d" }}
     isActive={() => isWorks}
     to="/works/moving-image/intro"
 />
                                                                                                    

`

Answer 1

Well I hope this helps someone one day;-) This is all achieved with useEffect and withRouter from react-router.

import { withRouter, NavLink } from "react-router-dom";

export default withRouter(function SomeFuntionComponent({ location }) {
  const [currentPath, setCurrentPath] = useState(location.pathname);

  useEffect(() => {
    const { pathname } = location;
    console.log("New path:", pathname);
    setCurrentPath(pathname);
  }, [location.pathname]);

Then finally add isActive on your NavLink as below

isActive={() => (currentPath.indexOf("/some-link") > -1)}
      

<NavLink
            strict
            className="nav-link"
            isActive={() => (currentPath.indexOf("/moving") > -1)}
            activeStyle={{ color: "white" }}
            to="/some-link"
          >