33_向路由组件传递数据

佚名 7年前 (2019-04-19) 随笔 841人围观抢沙发百度已收录

一级路由：

home.jsx

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

import React, {Component} from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'

import MyNavLink from '../components/my-nav-link'
import News from './news'
import Message from './message'

export default class Home extends Component {
    render() {
        return (
            <div>
                <h2>home route component</h2>
                <div>
                    <ul className='nav nav-tabs'>
                        <li>
                            <MyNavLink to='/home/news'>News</MyNavLink>
                        </li>
                        <li>
                            <MyNavLink to='/home/message'>Message</MyNavLink>
                        </li>
                    </ul>
                    <div>
                        <Switch>
                            <Route path='/home/news' component={News}/>
                            <Route path='/home/message' component={Message}/>
                            <Redirect to='/home/message'/>
                        </Switch>
                    </div>
                </div>
            </div>

        )
    }
}

二级路由：

message.jsx

import React, {Component} from 'react'
import {Route} from 'react-router-dom'

import MessageDetail from './message-detail';

export default class Message extends Component {
    state = {
        messages: []
    }

    componentDidMount() {
        //模拟发送ajax请求，异步获取数据
        setTimeout(() => {
            const messages = [
                {id: 1, title: 'message001'},
                {id: 3, title: 'message003'},
                {id: 5, title: 'message005'},
                {id: 6, title: 'message006'},
            ]
            // 更新状态
            this.setState({messages})
        }, 1000)

    }

    render() {

        return (
            <div>
                <ul>
                    {
                        this.state.messages.map((m, index) => (
                            <li key={index}>
                                <a href={`/home/message/messagedetail/${m.id}`}>{m.title}</a>
                            </li>
                        ))
                    }
                </ul>
                {/*:id代表必须传一个参数,既是占位符，也是标识名称*/}
                <Route path='/home/message/messagedetail/:id' component={MessageDetail}/>
            </div>

        )
    }
}

二级路由：

news.jsx

import React, {Component} from 'react'

export default class News extends Component {
    state = {
        newsArr: [
            'news111',
            'news222',
            'news333',
            'news444',

        ]
    }

    render() {
        return (
            <ul>
                {
                    this.state.newsArr.map((c, index) => <li key={index}>{c}</li>)
                }
            </ul>
        )
    }
}

细节组件：

import React from 'react'

const allMessage = [
    {id: 1, title: 'message001', content: '我爱你，中国'},
    {id: 3, title: 'message003', content: '我爱你，老婆'},
    {id: 5, title: 'message005', content: '我爱你，孩子'},
    {id: 6, title: 'message006', content: '我爱你，父母'},
]
export default function MessageDetail(props) {
    console.log(props)
    // 得到请求中参数的id
    const {id} = props.match.params
    //查询得到对应的message
    const message = allMessage.find(//返回第一个结果为true的数组元素
        //哪一个m对应上了m.id===id 则结果为true，就是find的结果
        (m) => m.id === id * 1
    );
    return (
        <ul>
            <li>ID:{message.id}</li>
            <li>TITLE:{message.title}</li>
            <li>CONTENT:{message.content}</li>
        </ul>
    )
}