无法在 React 路由器链接中传递状态

Question

I have a notification bubble that is supposed to link to a chat interface.

I am trying to pass the state for the chat in the link that the bubble is in, but no luck.

class NotifBubble extends Component {

    componentWillMount() {
        this.pathname = "/chat/" + this.props.merchant.id
        if (this.props.merchant.id === 0) {
            this.pathname = '#';
        }

    }

    render() {
        if (typeof this.props.merchant === 'undefined') {
            return <div></div>
        }
        return (
            <Link className="notif-bubble-link" to={{
                pathname: this.pathname,
                state: { merchant: this.props.merchant }
            }}><div className="notif-bubble slide-in-right">
                    {this.props.message}
                </div></Link>
        );
    }
}

export default NotifBubble;

Everything is working correctly - up to the point where I pass the state, this.props.merchant, into the link. this.props.merchant is absolutely correct though.

What am I doing wrong here to not pass state correctly?

Answer 1

Never use this.pathname to store your component state. Use the React State API provided.

Also it is preferred to initialize the state in the constructor (as opposed to componentWillMount )

class NotifBubble extends Component {
  constructor(props) {
    super(props);

    const pathname = props.merchant.id === 0 ?
      '#' : `/chat/${props.merchant.id}`;

    this.state = {
      pathname
    };
  }

  render() {
    if (typeof this.props.merchant === 'undefined') {
      return <div > < /div>
    }
    return ( <
      Link className = "notif-bubble-link"
      to = {
        {
          pathname: this.state.pathname,
          state: {
            merchant: this.props.merchant
          }
        }
      } > < div className = "notif-bubble slide-in-right" > {
        this.props.message
      } <
      /div></Link >
    );
  }
}

export default NotifBubble;

Answer 2

To pass object, you need to stringify the object first,

<Link className="notif-bubble-link" 
    to={{pathname: this.pathname,
         state: { merchant: JSON.stringify(this.props.merchant)}
       }}>
   <div className="notif-bubble slide-in-right">
         {this.props.message}
   </div>
</Link>

To access state do this,

const merchant = JSON.parse(this.props.location.state.merchant)

Answer 3

When using a pathname url that contains search parameters or hash parameters like this: /link?id=100 or /link#some-id then it won't pass the state object to the next route unless you move the parameters to their own designated properties like this:

        <Link to={{
            pathname: '/link',
            search: '?id=100',
            hash: '#some-id',
            state: {
              id: 100,
            }
        }}>
          Click here
        </Link>

Hope that helps anyone who has a url with search or hash parameters. link to React-Router docs