React Router check the actual path

Question

I am new in React JS and I want to check the actual route using React Router. This is the entry point:

ReactDOM.render(
  <Provider store={store}>
    <ConnectedRouter history={history}>
      <div>
        <HeaderControl />
        <MuiThemeProvider>
          <Switch>
            <Routes />
            <PrivateRoute path="/" component={Home} />
          </Switch>
        </MuiThemeProvider>
        <Footer />
      </div>
    </ConnectedRouter>
  </Provider>,
  document.getElementById('app'),
);

The main goal is rendering a conditional component called Title inside of my Home component. This is my Home component:

import React, { Component } from 'react';
import { Title } from '../Titles/titles';

class Home extends Component {
  render() {
    return (
      <div className="container-view">
        <div className="container-view-inside">
          <Title />
        </div>
      </div>
    );
  }
}

export { Home as default, Title };

The condition is that if the actual url is /home for example, the title is Title1 and if the actual url is /other the title is Title2. The problem is that I do not know how to check the actual path and then, build the Title Component.

Thanks.

Answer 1

Routed components (the ones passed to the <Route> components) will have a prop called location. You can check location.pathname see what the current path is, and make a condition based on that.