React复杂案例之Routere

1.index

import React from 'react'
import {render} from 'react-dom'
import {BrowserRouter} from 'react-router-dom'

import App from './components/app'


/*

 */

render((
    <BrowserRouter>
        <App/>
    </BrowserRouter>
),document.getElementById('root'));

2.app

import React,{Component} from 'react'
import {NavLink,Switch,Route,Redirect} from 'react-router-dom'
import About from '../views/about'
import Home from '../views/home'

export default class App extends Component{

    /*
        如何编写路由效果？
            1.编写路由组件
            2.在父路由组件中指定
                路由链接
                路由
      */

    render(){
        return(
            <div>
                <div className="row">
                    <div className="col-xs-offset-2 col-xs-8">
                        <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">
                            <NavLink className="list-group-item" to='/about'>About</NavLink>
                            <NavLink className="list-group-item" to='/home'>Home</NavLink>
                        </div>
                    </div>
                    <div className="col-xs-6">
                        <div className="panel">
                            <div className="panel-body">
                                {/*switch表示只能显示一个，匹配才会显示*/}
                                <Switch>
                                    <Route path='/about' component={About}/>
                                    <Route path='/home' component={Home}/>
                                    {/*如果都没用匹配则自动重定向到此*/}
                                    <Redirect to='/home'/>
                                </Switch>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

3.about

import React,{Component} from 'react'

export default class About extends Component{

    render(){
        return(
            <div>
                <h1>About Component</h1>
            </div>
        )
    }
}

4.home

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

import News from './home/news'
import Message from './home/message'

export default class Home extends Component{

    render(){
        return(
            <div>
                <h1>Home Component</h1>
                <div>
                    <ul className='nav nav-tabs'>
                        <li><NavLink to='/home/news'>News</NavLink></li>
                        <li><NavLink to='/home/message'>Message</NavLink></li>
                    </ul>
                    <div className='panel-body'>
                        <Switch>
                           <Route path='/home/news' component={News}/>
                           <Route path='/home/message' component={Message}/>
                            <Redirect to='/home/message'/>
                        </Switch>
                    </div>
                </div>
            </div>
        )
    }
}

4.1.news

import React,{Component} from 'react'

export default class News extends Component{

    state = {
        newsList:[
            'news001',
            'news002',
            'news003',
        ]
    };

    render(){

        const {newsList} = this.state;

        return(
            <ul>
                {
                    newsList.map((item,index)=><li key={index}>{item}</li>)
                }
            </ul>
        )
    }
}

4.2message

import React,{Component} from 'react'
import {Route,NavLink} 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:2,title:'Message002',},
               {id:3,title:'Message003',},
           ];
           this.setState({messages});
        },1000);
    }

    showDetail1 = (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();
    };

    skipPage = ()=>{
        window.location = 'https"//www.baidu.com';
    };

    render(){

        return(
            <div>
                <ul>
                    {
                        this.state.messages.map((m,index)=>(
                            <li key={index}>
                                <NavLink to={`/home/message/messageDetail/${m.id}`}>{m.title}</NavLink>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <button className='btn btn-primary' onClick={()=>{this.showDetail1(m.id)}}>Push查看详情</button>
                                &nbsp;&nbsp;&nbsp;&nbsp;
                                <button className='btn btn-primary' onClick={()=>{this.showDetail2(m.id)}}>Replace查看详情</button>
                                <br/>
                                <br/>
                            </li>
                        ))
                    }
                </ul>
                <p>
                    <button className='btn bg-danger' onClick={this.back}>回退</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button className='btn bg-danger' onClick={this.forward}>前进</button>
                    &nbsp;&nbsp;&nbsp;&nbsp;
                    <button className='btn bg-danger' onClick={this.skipPage}>页面跳转</button>
                </p>
                <Route path='/home/message/messageDetail/:id' component={MessageDetail}/>
            </div>
        )
    }
}

4.3message-detail

import React,{Component} from 'react'

export default class MessageDetail extends Component{

    render(){

        const messages = [
            {id:1,title:'Message001',content:'我爱你中国1'},
            {id:2,title:'Message002',content:'我爱你中国2'},
            {id:3,title:'Message003',content:'我爱你中国3'},
        ];

        const {id} = this.props.match.params;

        const message = messages.find(m=>m.id===parseInt(id));
        console.log(id,message);

        return(
            <ul>
                <li>ID:{message.id}</li>
                <li>Title:{message.title}</li>
                <li>Content:{message.content}</li>
            </ul>
        )
    }
}