react-router-dom复习总结

React-router-dom

1.安装

npm install react-router-dom -S

2.RouteSample

import React from 'react'

import { BrowserRouter as Router, Link , Route , Switch , Redirect}  from 'react-router-dom'
export default function RouteSample(){
    return (
        <div>
            <Router>
                {/*
                    连接
                */}
                    <li>
                        <Link to='/'>首页</Link>
                        <Link to='/about'>about页</Link>
                        <Link to='/home/:id'>Home页</Link>
                    </li>

                {/*
                    路由配置 
                    Switch 表示只匹配一个
                */}

                <Switch> 
                    <Route exact path= '/'  component={Index}></Route>
                    <Route path= '/about' component={About}></Route>
                    <Route path= '/home/:id' component={Home}></Route>

                    {/*
                        404
                    */}
                    <Route  component={404}></Route>
                </Switch>
            </Router>
            RouteSample
        </div>
    )
}

//1.获取动态路由/home/:id
props.match.params.id

//2.导航指令
props.history.goBack()  //后退
props.history.push('/about')
props.history.replace('/about')

//2.Url信息
props.location

3.路由嵌套

About.js

import { BrowserRouter as Router, Link , Route , Switch , Redirect}  from 'react-router-dom'
function About(props){
    return (
        <div>
            <Link to='/about/me'>个人中心</Link>
            <Link to='/about/order'>订单查询</Link>

            <Switch>
                <Route path='/about/me' component={()=>(<div>me</div>)}></Route>
                <Route path='/about/order' component={Order}></Route>
                {/*
                    默认页面
                */}
                <Redirect to='/about/me'></Redirect>
            </Switch>
        </dib>
    )
}

4.路由守卫

function PrivateRoute({component: Comp, isLogin, ...rest}){
    //isLogin 判断是否登陆

    //render 动态渲染组件

    return (
        <Route {...rest} render={
            props => isLogin ? <Comp /> : <Redirect 
                            to={
                                {
                                    pathname: '/login',
                                    state:{ props.location.pathname } //成功后的重定向
                                }
                                }>
        }></Route>
    )
}

//登陆组件
function Login({location,isLogin}){
    const redirect = location.state.redirect || '/'
    if(isLogin){
        return  <Redirect to={ redirect }></Redirect>
    }

    return (
        <div onClick={login}>用户登陆</div>
    )
}


//使用
<Switch>
    <PrivateRoute path='/login' component={Login}></PrivateRoute>
</Switch>

2. store/user.js

const initial ={
    isLogin : false,   // 是否登陆成功
    loading : false   //正在登陆
}
//必须是一个函数(初始化状态)
export const countReducer = (state = initial,action)=>{
    switch(action.type){
        case 'requestLogin':
            return {
                isLogin : false,
                loading : true
            }
            break;
        case 'login':
             return {
                isLogin : true,
                loading : false
             }
            break;
        default:
            return state;
    }
}


export const login = () => dispatch =>{ //返回的是一个函数
        dispatch({type: 'requestLogin'});  //正在登陆
        setTimeout(()=>{
            dispatch({type: 'login'})
        },1000)
    }
}

3.注册状态 1.store/index.js

import { createStore, applyMiddleware } from 'redux'

import logger from 'redux-logger'
import thunk from 'redux-thunk'

import { countReducer } from './countRedux'  //导入状态
import { user } from './user'

//注意 applyMiddleware 顺序 先logger 日志记录，再thunk 异步
const store = createStore( combineReducers({
        count:countReducer,
        user
}), applyMiddleware(logger,thunk));


export default store;

2.ReduxTest.js

import React from 'react'
// import store from  './store'
import { connect } from 'react-redux'
import { add,minus,asyncAdd} from './store/countRedux'

const mapStateToProps = state => ({num: state.count})

const mapDispatchToProps = {add,minus,asyncAdd}

@connect(mapStateToProps,mapDispatchToProps)
class ReduxTest extends Component{
    render(){
        const {minus , num, add, asyncAdd } = this.props;
        return (
            <div>
                <p onClick={minus}>减</p>
                <p>{num}</p>
                <p onClick={add}>加</p>
                <p onClick={asyncAdd}>异步</p>
            </div>
        )
    }
}