react-router 6.0.0-beta.3

on Node.js Yarn

Loads of goodies for you this week, as well as a few breaking changes for all of you eager beavers who are brave enough to use beta software in production! 🦫

(seriously, thank you all for helping us tighten up our APIs and fix nasty bugs)

💔 Breaking Changes!

• NavLink no longer supports the activeClassName or activeStyle props. Instead, we provide a more powerful API that allows you to pass functions to either the className or style props to conditionally apply values based on the link's active state. While a bit more verbose in some cases, this offers a nicer experience for folks who use utility class-based CSS. (#7194)

// Before
<NavLink className="link" activeClassName="active-link" />
<NavLink style={{ color: "blue" }} activeStyle={{ color: "green" }} />

// After
<NavLink
  className={({ isActive }) =>
    `link ${
      isActive
        ? "active-link"
        : // Couldn't do this before!
          "inactive-link"
    }`
  }
/>
<NavLink style={({ isActive }) => ({ color: isActive ? "green" : "blue" })} />

Note: You can always abstract over this feature in a custom NavLink if you prefer the old v5 API.

• The useRoutes API has changed slightly. Instead of passing a basename as the second argument, you should instead pass it as a named property in an object:

// Before
useRoutes([...routes], basename);

// After
useRoutes([...routes], { basename });

🐛 Bugfixes

• The basename prop on Routes is treated as case-insensitive (#7997)
• useNavigate previously used the incorrect pathname when called from parent routes when the URL matches one of its children. This fix also applies to useSearchParams (#7880)

✨ Enhancements

• Routes and useRoutes now allow you to override the location, which may be useful when building some modal interfaces and route transition animations. We are working hard to update our docs to include examples for advanced patterns where this might be useful, but in the mean time this also brings Routes closer to feature parity with v5's Switch via the location prop. (#7117)
• Provided new hooks useClickHandler and usePressHandler to make customizing Links a bit easier. (#7998)
  • Please note: with great power comes great responsibility. If you create a custom Link, be sure to render an actual HTML anchor element, otherwise your app will likely be inaccessible without a significant amount of additional work which, I assure you, you don't want to do!

💻 Installing

Development for v6 is chugging along on the dev branch.

If you'd like to test it out, install from npm:

$ npm install history react-router-dom@next

🙏 Credits

Thanks to @andrelandgraf, @dhulme, @fgatti675, @hugmanrique, @MeiKatz, @chaance and @mjackson for your contributions!