React router how to check site header url for route match using match?

Question

JavaScript

prompt, there is a structure of routes and there is a Heading the general for all pages. How can I check if the current page is favorites via match, i.e. for /favorites/ /favorites/n and display the correct class?

render() {
        return (
            <Router>
                <div className="app">
                    <AppHeader/>
                    <Switch>
                        <Route exact path="/" component={NowPlayingPage}/>
                        <Route path="/page/:page" component={NowPlayingPage}/>
                        }}
                        />
                        <Route path="/movie/:id" component={MoviePage}/>
                        }}/>
                        <Route path="/favorites/:page?" component={FavoriteMoviePage}/>
                        }}/>
                        <Route component={Page404}/>
                    </Switch>
                </div>
                <AppFooter/>
            </Router>
        );
    }

There is such an option, it’s working but it’s a crutch, I would like it to be normal using React. In the console I output match,location
match
{path: "/", url: "/", params: {…}, isExact: false}
isExact : false
params: {}
path: "/"
url: "/"
And in match I don't understand which of these will help me identify a match.

Perhaps I should put the header in the route of the page components and then match will give information, but this is also a strange option, something that can be displayed once in the app separately on each page.

Answer 1

Just use Route
In AppHeader, in the right place

<Route path="/favorites" render={() =>
    <div>То что нужно показать если url == /favorites*</div>}>