CODEWITHSUNDEEP
javascriptreactjsreact-router
rayman22
rayman22

Reputation: 81

Change state if I choose other React Router?

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>
  )

Upvotes: 0

Views: 265

Answers (1)

Farid Ansari
Farid Ansari

Reputation: 841

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.

Upvotes: 2

Related Questions