react - router路由的使用

实现切换效果

1.静态组件

 

2.安装router

  npm install --save react-router

https://reacttraining.com/react-router/  路由学习的官网-很多案例

3.app.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'
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{
   
   
    render(){
      
        return(
            <div>
               <h2>router  demo...</h2>
               <div className="container">
                   <div className="row">
                        <div className="col-md-2">
                            <div className="list-group">
                                 <NavLink className='list-group-item' to='/home'>Home</NavLink>
                                <NavLink className='list-group-item' to='/about'>About</NavLink>
                               
                            </div>
                        </div>
                        <div className="col-md-6">
                              <div className="panel">
                                 <div className="panel-body">
                                    <Switch>
                                        <Route path='/home' component={Home} />
                                        <Route path='/about' component={About} />
                                        <Redirect to='/home'/>
                                    </Switch>
                                 </div>
                              </div>
                        </div>
                   </div>
                
                 
               </div>
             
            </div>
        )
    }
}

4.about.jsx

import React,{Component} from 'react'
export default class About extends Component{
    render(){
        return(
            <div>about route Component</div>
        )
    }
}

4. home.jsx

import React,{Component} from 'react'
export default class Home extends Component{
    render(){
        return(
            <div>
                home react Component
            </div>
        )
    }
}

5. index.js

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

import './index.css';
import App from './components/app'
import * as serviceWorker from './serviceWorker';

import PropTypes from 'prop-types'

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

serviceWorker.unregister();

NavLink-组件包装优化

https://reacttraining.com/react-router/  -- router 的API  

https://reacttraining.com/react-router/web/api/NavLink

app.jsx

import React, {Component} from 'react'
import PropTypes from 'prop-types'
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{
   
   
    render(){
      
        return(
            <div>
               <h2>router  demo...</h2>
               <div className="container">
                   <div className="row">
                        <div className="col-md-2">
                            <div className="list-group">
                                <NavLink className='list-group-item' to='/home' activeClassName='activeClass'>Home</NavLink>
                                <NavLink className='list-group-item' to='/about' activeClassName='activeClass'>About</NavLink>
                               
                            </div>
                        </div>
                        <div className="col-md-6">
                              <div className="panel">
                                 <div className="panel-body">
                                    <Switch>
                                        <Route path='/home' component={Home} />
                                        <Route path='/about' component={About} />
                                        <Redirect to='/home'/>
                                    </Switch>
                                 </div>
                              </div>
                        </div>
                   </div>
                
                 
               </div>
             
            </div>
        )
    }
}

MyNavLink.jsx

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

export default class MyNavLink extends Component{
    render(){
        return(
            <NavLink {...this.props} activeClassName='activeClass' />
        )
    }
}

app.jsx

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


import About from '../views/about'
import Home from '../views/home'
import MyNavLink from './myNavLink'




export default class App extends Component{
   
   
    render(){
      
        return(
            <div>
               <h2>router  demo...</h2>
               <div className="container">
                   <div className="row">
                        <div className="col-md-2">
                            <div className="list-group">
                                <MyNavLink className='list-group-item' to='/home' >Home</MyNavLink>
                                <MyNavLink className='list-group-item' to='/about' >About</MyNavLink>
                               
                            </div>
                        </div>
                        <div className="col-md-6">
                              <div className="panel">
                                 <div className="panel-body">
                                    <Switch>
                                        <Route path='/home' component={Home} />
                                        <Route path='/about' component={About} />
                                        <Redirect to='/home'/>
                                    </Switch>
                                 </div>
                              </div>
                        </div>
                   </div>
                
                 
               </div>
             
            </div>
        )
    }
}

定义个myNavLink.jsx组件

传入参数  ... this.props

 

路由嵌套 -路由组件中的路由

home.jsx

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

import MyNavLink from '../components/myNavLink'
import News from './news'
import Message from './message'

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

news.jsx

import React,{Component} from 'react'

export default class News extends Component{
    state={
        newsArr:[
            'new01','new02','new03'
        ]
    }
    render(){
        return (
            <ul>
                {
                    this.state.newsArr.map((news,index) => (<li key={index}>{news}</li>))
                }
            </ul>
        )
    }
}

messages.jsx

import React,{Component} from 'react'


export default class Message extends Component{
    state={
        messages:[]
    }
    componentDidMount(){
        // 模拟发送ajax请求，异步请求发送数据
        setTimeout(() => {
            const messages=[
                    {id:1,title:'msg001'},
                    {id:2,title:'msg002'},
                    {id:4,title:'msg004'}
            ]
            this.setState({messages})
        },1000)
    }
    render(){
        return (
            <ul>
                {
                    this.state.messages.map((m,index) => (
                    <li>
                        <a href="#">{m.title}</a>
                    </li>
                    
                    ))
                }
            </ul>
        )
    }
}

 

向路由组件传递数据 -- 可以通过路由链接传递数据

三级路由接收一个id值

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:'msg001'},
                    {id:2,title:'msg002'},
                    {id:4,title:'msg004'}
            ]
            this.setState({messages})
        },1000)
    }
    render(){
      
        return (
            <div>
                 <ul>
                {
                    this.state.messages.map((m,index) => (
                    <li key={index}>
                        <a href={`/home/message/detail/${m.id}`} >{m.title}</a>
                    </li>
                    
                    ))
                }
                </ul>
                <div>
                    <Route  path='/home/message/detail/:id'  component={MessageDetail}/>
                </div>
            </div>
           
        )
    }
}

detail.jsx

import React,{Component} from 'react'

const allMessages=[
    {id:1,title:'msg001',content:'kdfjdal111'},
    {id:2,title:'msg002',content:'kdfjdal222'},
    {id:4,title:'msg004',content:'kdfjdal144'}
]
export default function MessageDetail(props){
    const {id}=props.match.params  //接收参数  id="1" 返回字符串1 
    const message=allMessages.find((m) => m.id===id*1) //返回结果为true的第一个数组元素  ，id*1转成number类型
    //debugger
    return (
        <ul>
            <li>Id:{message.id}</li>
            <li>title: {message.title}</li>
            <li>content:{message.content}</li>
        </ul>
    )
}

${m.id} 参数  

：id 向子组件MessageDetail.jsx传参数  ，props.match.params接收参数

a标签是非路由链接会发请求 ，路由链接不会发请求，可以替换成自定义的MyNavLink标签

 

2种路由跳转方式 ：

      1种是路由链接，还可以通过button实现路由跳转

      https://reacttraining.com/react-router/web/api/history

     通过点击button 实现查看详情 （push） ，事件使用箭头函数，向回调函数里传参数

 

通过点击button 实现查看详情 （replace） --  替换 回退到上一级

还有回退，前进的方法

页面跳转：window.location='http://www....'