35_2种路由的跳转方式

写路由步骤：

　　1.定义路由组件

　　2.父路由组件重写《link》或《NavLink》标签或《Route》(可能会有《Switch》和《Redirect》)

项目目录：

代码：

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

import About from '../views/about'
import Home from '../views/home';
import MyNavLink from './my-nav-link'

export default class App extends Component {
    render() {
        return (
            <div>
                <div className='row'>
                    <div className='col-xs-8 col-xs-offset-2'>
                        <div className='page-header'>
                            <h2>React Router Demo</h2>
                        </div>
                    </div>
                </div>
                <div className='row'>
                    <div className='col-xs-2 col-xs-offset-2'>
                        <div className='list-group'>
                            <MyNavLink className='list-group-item' to='/about'>about</MyNavLink>
                            <MyNavLink className='list-group-item' to='/home'>home</MyNavLink>
                        </div>
                    </div>
                    <div className='col-xs-6'>
                        <div className='panel'>
                            <div className='panel-body'>
                                <Switch>
                                    <Route path='/about' component={About}/>
                                    <Route path='/home' component={Home}/>
                                    <Redirect to='/home'/>
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

app.jsx

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

export default class MyNavLink extends Component {
    render() {

        //...this.props
        //将外部传入的所有属性传递给NavLink
        return <NavLink {...this.props} activeClassName='activeClass'/>
        //用MyNavLink的人相当于用NavLink

    }
}

my-nav-link.jsx

    import React, {Component} from 'react'

    export default class About extends Component {
        render() {
            return (
                <div>
                    about route component
                </div>
            )
        }
    }

about.jsx

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/news'/>
                        </Switch>
                    </div>
                </div>
            </div>

        )
    }
}

home.jsx

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

import MessageDetail from './message-detail';
import MyNavLink from "../components/my-nav-link";

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)

    }

    /*
    * 两种跳转路由的方式 push和replace
    * */
    showDetail = (id) => {
        this.props.history.push(`/home/message/messagedetail/${id}`)
    }
    showDetail2 = (id) => {
        this.props.history.replace(`/home/message/messagedetail/${id}`)
    }
    back = () => {
        this.props.history.goBack();
    }
    forward = () => {
        this.props.history.goForward()
    }
    /*
    * 通过js进行页面跳转
    * */
    reqPage = () => {
        window.location = 'http://www.baidu.com'
    }

    render() {

        return (
            <div>
                <ul>
                    {
                        this.state.messages.map((m, index) => (
                            <li key={index}>
                                <MyNavLink to={`/home/message/messagedetail/${m.id}`}>{m.title}</MyNavLink>
                                &nbsp;&nbsp;
                                <button onClick={() => {
                                    this.showDetail(m.id)
                                }}>push查看
                                </button>
                                &nbsp;&nbsp;
                                <button onClick={() => {
                                    this.showDetail2(m.id)
                                }}>replace查看
                                </button>
                            </li>
                        ))
                    }
                </ul>
                <p>
                    <button onClick={this.back}>回退</button>
                    <button onClick={this.forward}>前进</button>
                </p>
                <p>
                    <button onClick={this.reqPage}>页面跳转</button>
                </p>

                {/*:id代表必须传一个参数,既是占位符，也是标识名称*/}
                <Route path='/home/message/messagedetail/:id' component={MessageDetail}/>
            </div>

        )
    }
}

message.jsx

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

message-detail.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

35_2种路由的跳转方式

猜你喜欢