Comments (5)
useMatches
works on the routes hierarchy, so for a given route, you'll only get matches for each parent route. It doesn't consider other routes that happen to share a partial prefix.
So this works, as <PollDetail>
is a child of <Poll>
{
path: '/',
element: <Layout />,
children: [
{
path: 'poll',
element: <Poll />,
children: [
{
path: ':id',
element: <PollDetail />,
},
],
},
],
}
Instead of this, where <PollDetail>
is a sibling of <Poll>
. So useMatches
will not include matches for sibling routes even though they both have /poll
prefix.
{
path: '/',
element: <Layout />,
children: [
{
path: '/poll',
element: <Poll />,
},
{
path: '/poll/:id',
element: <PollDetail />,
},
],
}
from react-router.
Can you elaborate on what information you would want to be added and to which pages? Is this an misunderstanding of how breadcrumbs via useMatches
work? Or a misunderstanding of the concept of an index route?
from react-router.
If I add a few routes as children of another route, it will consider the parent route as a layout wrapping the children. I don't want that to happen. I want the subroutes to be subroutes merely based on the way the paths are structured, i.e. parent page /poll will go to another page of /poll/:poll_id. If I make the routes siblings to each other instead of nesting one into the other, then useMatches won't realize that one route is logically connected to the next route. In other words breadcrumbs can only work for layouts and direct children of layouts. Please read the stackoverflow post, it's explained much better there.
from react-router.
I see. I thought there's a way to make it work without nesting. Thanks.
from react-router.
I do think that the proper nesting and use of index
routes is the right solution here, however:
I want the subroutes to be subroutes merely based on the way the paths are structured
It sounds like maybe you just want strict URL-based breadcrumbs and don't care about the route/UI nesting? If so you don't want to use useMatches
(which is tightly coupled to the route hierarchy by design as mentioned above) and instead can create your breadcrumbs via the URL segments: useLocation().pathname.split('/')
from react-router.
Related Issues (20)
- [Bug]: Multiple memory routers cannot be used independently at the same time HOT 3
- [Bug]: Incorrect Handling of Double-Encoded URL Parameters HOT 3
- [Bug]: useParams type always adds undefined HOT 4
- [Bug]: RouterProvider renders old state when the router is re-initialized HOT 1
- useNavigate can only be called inside a Router HOT 5
- [Bug]: Error no route matches URL / v6.22.1 with Create react app HOT 3
- [Bug]: isBrowser false when no document.createElement
- [Bug]: Uncaught (in promise) TypeError: subscriber is not a function HOT 4
- [Docs]: I want to contribute to making Korean documents. HOT 1
- [Bug]: I can't navigate to the /path directly HOT 2
- [Bug]: What's the updated way to navigate outside React Components? HOT 4
- [Bug]: route specific components are not rendering if the app is configured to run at different base path using a webmanifest file HOT 5
- [Bug]: Serious bug, If you repeat from the list page to the details page for many times, the page will freeze(real mobile phone)
- [Bug]: encType on Form does not include "application/json" HOT 1
- [Bug]: react-router-dom is showing a white page HOT 3
- [Bug]: Loader runs twice on page refresh and without using <StrictMode> HOT 2
- [Bug]: useSearchParams hook ignores search params if url ends with hash-link
- [Bug]: Memory leak when using `<Redirect />` in tests with jest + JSDOM HOT 1
- [Bug]: only '/' is working created by createBrowserRouter, other is 404 HOT 1
- [Bug]: when starting the application --- Module parse failed HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-router.