Phản ứng router, vượt qua đạo cụ với Link

Question

Im sử dụng Phản ứng Router để điều hướng đến một trang trong ứng dụng của tôi như thế này:

<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1}}>GotoPage!</Link> 

này hoạt động tốt nhưng tôi cũng muốn vượt qua một tài sản bổ sung cho các trang mới.

Khi render một thành phần mà không sử dụng liên kết tôi sẽ làm một cái gì đó như:

<MyComponent myProp={this.props.data}/> 

Tôi đã thử đi qua myProp={this.props.data} cùng trong params như thế này:

<Link to={`/single/${this.props.data.pageId}`} params={{singleId: 1, myProp={this.props.data}}}>GotoPage!</Link> 

Nhưng nó dường như không làm việc như myProp không được xác định trên trang mới như ngược với pageId mà tôi có thể nhận được như sau:

this.props.params.pageId; 

Tôi không được phép chuyển các tham số liên quan đến phi tuyến với Link?

Answer 1

Trong documentation cho Link và cũng là nguồn, không có đề cập đến việc chụp param. Nhưng tôi có được những gì bạn đang cố gắng làm.

Thay vì các tuyến đường mã hóa cứng, tôi có thể khuyên bạn sử dụng chức năng lịch sử của bộ phản ứng-bộ định tuyến router.push(). Làm điều gì đó giống như thay vì điều này:

class Foo extends React.Component { 
    ... 
    const handleNewRoute =() => { 
    let { pageId } = this.props.data 
    let singleId = '1' 
    this.context.router.push({ // use push 
     pathname: `/single/${pageId}`, 
     query: { singleId } 
    }) 
    } 

    render() { 
    return (
     <button onLeftClick={this.handleNewRoute} /> 
    ) 
    } 
} 

Bằng cách này, trong Phản ứng/JSX, một cái gì đó giống như ...{{singleId: 1, myProp={this.props.data}}}... nên <Link...foobar={{singleId: 1, myProp: this.props.data}}>. Cú pháp cũ là sai.

Answer 2

Tôi nghĩ cách tốt hơn để lấy dữ liệu bổ sung là ajax.

Nhưng nếu bạn muốn theo cách này, tôi kiểm tra api của Liên kết và tôi tìm thấy thuộc tính truy vấn.

query: 

An object of key:value pairs to be stringified. 

để bạn có thể sử dụng điều này để chuyển đối tượng khóa: giá trị cho tuyến đường tiếp theo, nhưng đối tượng này sẽ được xâu chuỗi và chuyển qua url tôi nghĩ.I thích ajax hơn.