Java教程

向路由组件中传递参数

本文主要是介绍向路由组件中传递参数，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

通过params传递

export default class Message extends Component {
    state = {
        messageArr: [
            { id: '1', title: '消息1' },
            { id: '2', title: '消息2' },
            { id: '3', title: '消息3' }
        ]
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messageArr.map((msgObj) => {
                            return (
                                <li key={msgObj.id}>
                                    {/* 向路由组件传递params传递参数 */}
                                    <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link>
                                </li>
                            )
                        })
                    }
                    <hr />
                    {/* 声明接收params参数 */}
                    <Route path="/home/message/detail/:id/:title" component={Detail} />

                </ul>
            </div>
        )
    }
}
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 (
            <div>
                <li>Id:{id}</li>
                <li>Title:{title}</li>
                <li>Content:{findResult.content}</li>
            </div>
        )
    }
}

通过Search传递路由参数

export default class Message extends Component {
    state = {
        messageArr: [
            { id: '1', title: '消息1' },
            { id: '2', title: '消息2' },
            { id: '3', title: '消息3' }
        ]
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messageArr.map((msgObj) => {
                            return (
                                <li key={msgObj.id}>
                                    {/* 向路由组件传递params传递参数 */}
                                    {/* <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link> */}
                                    {/* 向路由组件传递search传递参数 */}
                                    <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`} >{msgObj.title}</Link>
                                </li>
                            )
                        })
                    }
                    <hr />
                    {/* 声明接收params参数 */}
                    {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}
                    {/* 声明接收search参数 ，无需声明接收，正常注册理由即可*/}
                    <Route path="/home/message/detail" component={Detail} />
                </ul>
            </div>
        )
    }
}
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 (
            <div>
                <li>Id:{id}</li>
                <li>Title:{title}</li>
                <li>Content:{findResult.content}</li>
            </div>
        )
    }
}
备注：获取到的search是urlencoded编码字符串，需要借助querystring进行解析   通过state传递路由参数 
export default class Message extends Component {
    state = {
        messageArr: [
            { id: '1', title: '消息1' },
            { id: '2', title: '消息2' },
            { id: '3', title: '消息3' }
        ]
    }
    render() {
        return (
            <div>
                <ul>
                    {
                        this.state.messageArr.map((msgObj) => {
                            return (
                                <li key={msgObj.id}>
                                    {/* 向路由组件传递params传递参数 */}
                                    {/* <Link to={"/home/message/detail/" + msgObj.id + "/" + msgObj.title}>{msgObj.title}</Link> */}
                                    {/* 向路由组件传递search传递参数 */}
                                    {/* <Link to={`/home/message/detail/?id=${msgObj.id}&title=${msgObj.title}`} >{msgObj.title}</Link> */}
                                    {/* 向路由组件传递state传递参数 */}
                                    <Link to={{ pathname: "/home/message/detail", state: { id: msgObj.id, title: msgObj.title } }}  >{msgObj.title}</Link>
                                </li>
                            )
                        })
                    }
                    <hr />
                    {/* 声明接收params参数 */}
                    {/* <Route path="/home/message/detail/:id/:title" component={Detail} /> */}
                    {/* 声明接收search参数 ，无需声明接收，正常注册理由即可*/}
                    {/* <Route path="/home/message/detail" component={Detail} /> */}
                    {/* 声明接收state参数 ，无需声明接收，正常注册理由即可*/}
                    <Route path="/home/message/detail" component={Detail} />
                </ul>
            </div>
        )
    }
}
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 (
            <div>
                <li>Id:{id}</li>
                <li>Title:{title}</li>
                <li>Content:{findResult.content}</li>
            </div>
        )
    }
}

 

这篇关于向路由组件中传递参数的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航