32_嵌套路由

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

如何编写路由效果：

　　1.编写路由组件

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

　　2.在父路由组件中指定

　　　　路由链接：<NavLink>

　　　　路路由：<Route>

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>

        )
    }
}

home.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>
        )
    }
}

news.jsx

import React, {Component} from 'react'

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'}
            ]
            // 更新状态
            this.setState({messages})
        }, 1000)

    }

    render() {
        return (
            <ul>
                {
                    this.state.messages.map((m, index) => (
                        <li>
                            <a href="###">{m.title}</a>
                        </li>
                    ))
                }
            </ul>
        )
    }
}