向路由组件中传递参数

通过params传递

export default class Message extends Component {
    state = {
        messageArr: [
            { id: '1', title: '消息1' },
            { id: '2', title: '消息2' },
            { id: '3', title: '消息3' }
        ]
    }
    render() {
        return (
            

                

                    {
                        this.state.messageArr.map((msgObj) => {
                            return (
                                

                                    {/* 向路由组件传递params传递参数 */}
                                    {msgObj.title}
                                
                            )
                        })
                    }
                    

                    {/* 声明接收params参数 */}
                    

                
            
        )
    }
}

const DetailData = [
    { id: '1', content: '你好，北京' },
    { id: '2', content: '你好，上海' },
    { id: '3', content: '你好，广东' }
]
export default class Detail extends Component {

    render() {
        console.log(this.props);
        // 接收params参数
        const { id, title } = this.props.match.params
        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        })
        return (
            

                
Id:{id}
                
Title:{title}
                
Content:{findResult.content}
            
        )
    }
}

通过Search传递路由参数

export default class Message extends Component {
    state = {
        messageArr: [
            { id: '1', title: '消息1' },
            { id: '2', title: '消息2' },
            { id: '3', title: '消息3' }
        ]
    }
    render() {
        return (
            

                

                    {
                        this.state.messageArr.map((msgObj) => {
                            return (
                                

                                    {/* 向路由组件传递params传递参数 */}
                                    {/* {msgObj.title} */}
                                    {/* 向路由组件传递search传递参数 */}
                                    {msgObj.title}
                                
                            )
                        })
                    }
                    

                    {/* 声明接收params参数 */}
                    {/*  */}
                    {/* 声明接收search参数 ，无需声明接收，正常注册理由即可*/}
                    
                
            
        )
    }
}

const DetailData = [
    { id: '1', content: '你好，北京' },
    { id: '2', content: '你好，上海' },
    { id: '3', content: '你好，广东' }
]
export default class Detail extends Component {
    render() {
        console.log(this.props);
        // 接收params参数
        // const { id, title } = this.props.match.params
        //接收search参数
        const { search } = this.props.location
        const { id, title } = qs.parse(search.slice(1))
        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        })
        return (
            

                
Id:{id}
                
Title:{title}
                
Content:{findResult.content}
            
        )
    }
}

export default class Message extends Component {
    state = {
        messageArr: [
            { id: '1', title: '消息1' },
            { id: '2', title: '消息2' },
            { id: '3', title: '消息3' }
        ]
    }
    render() {
        return (
            

                

                    {
                        this.state.messageArr.map((msgObj) => {
                            return (
                                

                                    {/* 向路由组件传递params传递参数 */}
                                    {/* {msgObj.title} */}
                                    {/* 向路由组件传递search传递参数 */}
                                    {/* {msgObj.title} */}
                                    {/* 向路由组件传递state传递参数 */}
                                    {msgObj.title}
                                
                            )
                        })
                    }
                    

                    {/* 声明接收params参数 */}
                    {/*  */}
                    {/* 声明接收search参数 ，无需声明接收，正常注册理由即可*/}
                    {/*  */}
                    {/* 声明接收state参数 ，无需声明接收，正常注册理由即可*/}
                    
                
            
        )
    }
}

const DetailData = [
    { id: '1', content: '你好，北京' },
    { id: '2', content: '你好，上海' },
    { id: '3', content: '你好，广东' }
]
export default class Detail extends Component {
    render() {
        console.log(this.props);
        // 接收params参数
        // const { id, title } = this.props.match.params
        //接收search参数
        // const { search } = this.props.location
        // const { id, title } = qs.parse(search.slice(1))
        //接收state参数
        const { id, title } = this.props.location.state || {}
        const findResult = DetailData.find((detailObj) => {
            return detailObj.id === id
        }) || {}
        return (
            

                
Id:{id}
                
Title:{title}
                
Content:{findResult.content}
            
        )
    }
}