Render react component based on dynamic routes - reactjs

Question

I'm struggling to render a component based on routes from the React-Router. When the route is dynamic I can't seem to figure out a way to match the route.
I have created a component "Navbar" which I want to render only on specific routes. For this purpose I created a separate component "Tracker" which matches the route and renders the "Navbar" component.
Tracker.js snippet:
class Tracker extends Component {
render() {
var NavVisible =
this.props.location.pathname === "/feed" ||
this.props.location.pathname === "/explore" ||
this.props.location.pathname === "/chatroom" ||
this.props.location.pathname === "/username" ? (
<Navbar />
) : null;
return <div>{NavVisible}</div>;
}
}
Suppose if I have to display the Navbar component in "feed/(some_dynamic_path)", how should I write the condition?
A solution would be greatly appreciated.
Thanks.
Edit: App.js
import React, {Component} from 'react';
import {BrowserRouter, Switch, Route} from 'react-router-dom';
class App extends Component{
render(){
const DefaultContainer = () => (
<div>
<Route path='/home' component={ft}/>
<Route path='/explore' component={exp}/>
<Route path='/compose' component={add}/>
<Route path='/chatroom' component={msg}/>
<Route path='/user' component={usrpro}/>
</div>
)
return (
<BrowserRouter>
<div className="App">
<Tracker/>
<Switch>
<Route path='/' exact component={Splash}/>
<Route exact path="/(compose)" component={noNavContainer}/>
<Route exact path="/(newtext)" component={noNavContainer}/>
<Route path="/(login)" component={login}/>
<Route component={DefaultContainer}/>
</Switch>
</div>
</BrowserRouter>
);
}
}
export default App;

Answer 1

You can try something like:
this.props.location.pathname === '/feed/' + this.props.params.id
Might get you started: https://jaketrent.com/post/access-route-params-react-router-v4/

Answer 2

You can include Routers for various urls like this in your app.
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'
class App extends React.Component {
render () {
return (
<Router>
<Home>
<Switch>
<Route path='/feed/:path_variable' component={Navbar} />
</Switch>
</Home>
</Router>
)
}
}
Also In Navbar Component, You will get access to this.props.match.params.path_variable whose value changes based on the URL.
Read more about it in this nicely written article.
https://scotch.io/courses/using-react-router-4/route-params