Floating Routes (not in a Switch)

[ryanflorence]

Reference: #8350

If you have a "floating route", or a route that's not in a <Switch>, you can useMatch instead.

// v5
function Details() {
  return (
    <div>
      <h1>Details</h1>
      <Route path='/details/about' render={() => <h2>About</h2>}/>
    </div>
  );
};

// v6
import { useMatch } from "react-router-dom-v5-compat";

function Details() {
  const match = useMatch("/details/about");
  return (
    <div>
      <h1>Details</h1>
      {match && <h2>About</h2>}
    </div>
  );
};

Eventually you'll want to move that up to the parent <Routes>, make it a child of the parent <Route>, and use an <Outlet> instead.

[ryanflorence]

import { useMatch } from "react-router-dom-v5-compat";

function Details() {
  const match = useMatch("/details/about");
  return (
    <div>
      <h1>Details</h1>
      {match && <h2>About</h2>}
    </div>
  );
};