Toggle components in App.js based on routes, works only on refresh

Question

I'm trying to toggle a few components based on route. I do get it to work on a refresh but not a navigate. Anybody know what I'm missing and doing wrong here?

import { BrowserRouter as Router, withRouter } from "react-router-dom";

class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          pathname: {(this.props.location.pathname)}
          {!this.props.location.pathname.includes('/target') ? <TopBar childProps={childProps} /> : null}
          {!this.props.location.pathname.includes('/target') ? <Header /> : null}
          {this.props.location.pathname.includes('/target') ? <SecondaryHeader /> : null}
            <Routes childProps={childProps} />
          <Footer />
        </div>
      </Router>
    )
  }
}

export default withRouter(App)

@Dupocas You are more than welcome to show me. I'm not a React dev so having a bit of hard time with this here and different approaches. Any help I get is highly highly appreciated. — Dejan.S, Nov 19 '19 at 14:54
@Dupocas thanks, also maybe in short short explain why, how it works and where I should put it. — Dejan.S, Nov 19 '19 at 14:55

score 2 · Accepted Answer · answered Nov 19 '19 at 15:02

There is a component exported from react-router-dom which is called Route, and it encapsulates exactly the logic you want.

Conditionally renders components based on the current path

<Router>
    <Route path='/target' render={() => <MyComponent />} />
    <Route exact path='/target' render={() => <AnotherComponent />} />
</Router>

render accepts a function which returns some jsx (you can also use component, see the differences here).
path is the path that window.location.pathname must match to render what is being passed to render or component
exact is whether or not the path must be absolute.

Imagine that the current path is /target/foo. In this case MyComponent will be rendered but AnotherComponent won't.

You can also pass a regex to path, see the full docs here

Toggle components in App.js based on routes, works only on refresh

1 Answers1