Odtnhj

I'm trying to display the props value from the react router in the title place but I do not know if it is possible.

If router'/dashboard', title = 'Dashboard',
Else if router '/payment', title = 'Payment'

class Header extends React.Component {
 state = 
 title: '',
 ;

 render() {
 const title = this.state;

 return (
 <Typography>
 title
 </Typography>

 <Switch>
 <Route title="Dashboard" exact path="/dashboard" component=DashboardPage />
 <Route title="Payment" path="/payment" component=PaymentPage />
 </Switch>
 )

Method 1: You can wrap your Header component with withRouter which provides location as prop which has pathname inside it. You can use that to change title.

Method 2: you pass a function as prop to DashboardPage which will set state of title in Header component.

In Header component:

_setTitle = (title) => this.setState( title )

Pass _setTitle as below

<Route
 path='/dashboard'
 exact
 render=(props) => <DashboardPage ...props setTitle=this._setTitle />
/>

In DashboardPage component's constructor execute setTitle to set the correct title as below:

class DashboardPage extends Component 
 constructor(props) 
 super(props);
 this.props.setTitle('Dashboard');
 

Do the same for PaymentPage.

This should work. Let me know if this solves your problem.