match.params returns empty even when URL contains params

Hi, I’m in the process of upgrading to react-router 4 from v2. I’m not sure if this is a bug or not, but I’m having a really hard time getting my Header component to show the correct route params object. It doesn’t seem like the match.params object is available globally like the params object was in react-router 2 and I’m not sure how to make it available to sibling components.

App.jsx (wrapped with ConnectedRouter) -> contains Layout.jsx

const Layout = function(props) {
    return (
        <div className="layout" style={layout.base}>
            <Header inlineStyles={layout.header} params={props.match.params} />
            <Content inlineStyles={layout.content} />
            <Footer inlineStyles={layout.footer} />
        </div>
    );
};

Layout.propTypes = {
    match: PropTypes.object
};

export default Layout;

The Content component is where the bulk of my routes begin. When I try to access props.match inside of the Header component, I see this:

// Header.jsx
match: {
	isExact: false,
	params: {},
	path: "/",
	url: "/"
}

But when I access the props.match object from the nested component route, I get this:

// Content.jsx > Child > GrandChild
match: {
	isExact: true,
	params: {orgId: "1", projectId: "11", version: "1.0.0", modelId: "30"},
	path: "/orgs/:orgId/projects/:projectId/version/:version/models/:modelId",
	url: "/orgs/1/projects/11/version/1.0.0/models/30"
}

This is in the same render cycle.

1. Is it expected that the match object is not global to the entire router?
2. How do I access the same match object in my Header.jsx file as I have in my Content.jsx?

[McMainsLiam]

Thank you @CaitlinWeb for the matchPath suggestion, that’s super helpful.

For anyone else running into this problem, this was my solution:

import { matchPath } from 'react-router'

const match = matchPath(this.props.history.location.pathname, {
          path: '/path/:param',
          exact: true,
          strict: false
        })

And then you can use the match object just like you would normally:

let parameter = match.params.param
// do what you will the the param

[Floriferous]

To me, it is not clear why you would ever Not include all params in the match object, I really do not see a use case where you would not want all params to be listed (opposite argument). Because as mentioned by @goodbomb, you can always read the location URL in full.

I could give you an example for my use case, it involves layouts at the root of the Router, with dynamic and “static-ish” content, that still needs to change based on the route currently viewed. (And I now have to write some URL parsing algorithm).

I would consider it a total anti-pattern to ever have two matching ids with the same name like /document/:docId/nested/:docId/nested2/:docId, where I can understand that you don’t want them to be overridden. Adding a check for that in every path would do the trick.

I believe merging all match objects is the most intuitive way to go.

Edit: So for me, this is a bug, and is in the right place 😃