将道具传递到React Router的链接组件

Question

I'm passing location props to React Router's Link. It successfully navigates me away, but when I click "back" to go back to the previous page, I get an error:

TypeError Cannot Read property "statusUser" Undefined

It looks like the props are getting messed up when I navigate back.

Sidebar.js

Class Sidebar extends Commponent{
render(){    
    return(
     <Link to={
                {
                  pathname: `/user`,
                  state:{
                    statusUser: 'abc',
                  }
                 }
               }><Button>User Menu</Button>
 }
          )
}

User.jsx

class user extends Component {
  render(){    
    return(
        <UserTable status={this.props.location.state.statusUser}/>
    )
  }
}

UserTable.jsx

 class UserTable extends Component{
         render(){    
            return(
                     <Link to={
                {
                  pathname: `/user/detail/${this.props.status}`,
                  state:{
                    statusUser: this.props.status,
                  }
                 }
               }><Button>Detail</Button>
            )
          }
    }

UserDetail.jsx

   class UserDetail extends Component{
             render(){    
                return(
                      <p>{this.props.location.state.statusUser}</p>
                         <Link to={
                    {
                      pathname: `/user`,
                     }
                   }><Button>Back</Button>
                )
              }
        }

I think the problem is in User.js. How do I make the props fixed like using setState or stuff like that inside User.js file?

Just to be able read the props property, and after reading it go back to the previous page by clicking "back" button.

I'm sorry I just really really new to React so any help would be really appreciate. Thank you.

Answer 1

I believe you're getting that error when you click the Back button in UserDetail.jsx . You aren't passing a state object to User.jsx .

The User.jsx component tries to access this.props.location.state.statusUser , but state doesn't exist, and so it says it can't read the property statusUser on undefined ( state is undefined ).

Here's what you're missing, with a few typos fixed:

// UserDetail.jsx
class UserDetail extends Component {
  render() {
    return (
      <div>
        <p>{this.props.location.state.statusUser}</p>
        <Link
          to={{
            pathname: `/user`
            // (You aren't passing `state`)
          }}
        >
          <Button>Back</Button>
        </Link>  // <-- You weren't closing Link
      </div>
    );
  }
}

// User.jsx
class User extends Component {  // <-- Capital 'U'
  render() {
    return (
      <UserTable
        status={this.props.location.state.statusUser}  // <-- You require `state`
      />
    );
  }
}

As for how to fix it, the easiest way would be to pass a state object with your "Back" button in UserDetail.jsx .

You can also set defaultProps in React. I'm not sure if that's applicable to you, but it lets you provide a fallback for such things:

Edit: Include example of defaultProps and propTypes.

// User.jsx
class User extends Component {
  render() {
    return (
      <UserTable
        status={this.props.location.state.statusUser}
      />
    );
  }
}

// Maybe something you put in a different file
const defaultLocation = {
  state: {
    statusUser: '',  // <-- Your default statusUser
  },
};

User.defaultProps = {
  location: defaultLocation,
};

// import PropTypes from 'prop-types';
User.propTypes = {
  location: PropTypes.shape({
    state: PropTypes.shape({
      statusUser: PropTypes.string.isRequired,
    })
  })
};

I added PropTypes in the above example. It's a way to set checks for the data you're requiring in your components.

Typically, we don't put props into defaultProps if it isRequired , though, because it will never come to that. If you're unsure what default value to give statusUser , I'd recommend starting with making it required in propTypes , and then you can refactor in the future if the need arises.

---

There were some bugs with your other code samples, too. I've formatted them below, and fixed the bugs. I'll point out what I fixed in comments:

Sidebar.js

class Sidebar extends Component {  // <-- Lowercase 'c'; "Component"
  render() {
    return (
      <Link
        to={{
          pathname: `/user`,
          state: {
            statusUser: "abc"
          }
        }}
      >
        <Button>User Menu</Button>
      </Link>  // <-- You weren't closing Link
    );
  }
}

UserTable.jsx

class UserTable extends Component {
  render() {
    return (
      <Link
        to={{
          pathname: `/user/detail/${this.props.status}`,
          state: {
            statusUser: this.props.status
          }
        }}
      >
        <Button>Detail</Button>
      </Link>  // <-- You weren't closing Link
    );
  }
}