[v6][Docs]: v6 upgrade docs suggestions

[skyqrose]

What is the new or updated feature that you are suggesting?

I'm following the v6 upgrade docs. It says

What did we miss? Despite our best attempts at being thorough, it's very likely that we missed something. If you follow this upgrade guide and find that to be the case, please let us know.

So I'm letting you know.

Here's the things I would have had an easier time upgrading if they had been part of the docs:

• History: const history = useHistory(); history.action becomes const navigationType = useNavigationType. (Are there other parts of the history API that need migration instructions, too?)
• StaticRouter: I was using <StaticRouter location={url}> in frontend tests (though I'm not sure if that's common). It can be replaced by <MemoryRouter initialEntries={[url]}>.
• matchPath: the order of the two arguments is swapped from v5.

And the things I haven't figured out a good replacement for yet. They may just be missing parts of the documentation, or they may hint at features that need to be added to the new API. (If you happen to have suggestions for what to do, I'd appreciate it, but the point of this issue is to suggest clarifying this in the docs, not to get help.)

• The old v5 <NavLink isActive> doesn't seem to have any equivalent in v6 NavLink. How might someone do a custom isActive calculation in v6? I ended up using a <Link> and doing the match detection, styling, and aria-current manually, but it's not ideal. (It also looks like the v5 <NavLink aria-current> property is also not present in the v6 API.)
• v5 <Redirect from> allowed binding path params to be referenced in to. In my case I had a <Redirect from="/deprecated-widgets/:id" to="/new-widgets/:id"/>. I think I can do something like this, but it's kind of ugly, and if there's a recommended way to access the match in a redirect, it could be worth adding to the docs.

<Route path="/deprecated-widgets/:id" element={<WidgetRedirect />} />

const WidgetRedirect = () => {
  const { id } = useParams();
  return <Navigate to={`/new-widgets/${id}`} />;
};

Overall, the docs were excellent and easy to follow, and I like the new API. Great work!

Why should this feature be included?

So other people have an easier time upgrading.

[paul-sachs]

I was able to make NavLink isActive work for me in a slightly hacky way with something like:

<NavLink className={({ isActive }) => isActive || someOtherCondition ? 'active' : undefined} />

In my case, I have a navlink that is active for more than one route path. Not ideal in my mind but not worth changing all the routing around just to use v6.

It would be nice to have this functionality built in but the above works for now.

[skyqrose]

Yes, having a nav link active on more than one path was my reason for needing manual isActive logic as well.

[Jmenache]

For isActive, I was able to make it work simply, thanks to @paul-sachs suggestion. The v6 API appears more flexible to me than the old one, as we can use any logic we need in the className function.

// v5
<NavLink isActive={() => someCondition} activeClassName="active" />

// v6
<NavLink className={() => someCondition ? 'active' : undefined} />

[aholthagerty]

I couldn't find any mention of this within the migration guide, but it appears <Redirect> was renamed to <Navigate> in v6.

[timdorr]

It's under this section: https://reactrouter.com/docs/en/v6/upgrading/v5#use-usenavigate-instead-of-usehistory

[timothyerwin]

it seems like the isActive has a bug where root path / is always active.

I had to change the code to

<NavLink
  style={() => {
    let isActive = false;

    if (r.path === "/" && location.pathname === "/") {
      isActive = true;
    } else if (r.path !== "/") {
      isActive = location.pathname.startsWith(r.path);
    }

    return isActive
      ? { color: "#222", fontWeight: "700" }
      : {};
  }}
  to={r.path}
>
  {r.label}
</NavLink>

[github-actions[bot]]

This issue has been automatically marked stale because we haven't received a response from the original author in a while 🙈. This automation helps keep the issue tracker clean from issues that are not actionable. Please reach out if you have more information for us or you think this issue shouldn't be closed! 🙂 If you don't do so within 7 days, this issue will be automatically closed.

[github-actions[bot]]

This issue has been automatically closed because we haven't received a response from the original author 🙈. This automation helps keep the issue tracker clean from issues that aren't actionable. Please reach out if you have more information for us! 🙂