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> ); };