react-router

import React from "react";
import {BrowserRouter, Link, Route, Switch, Redirect} from "react-router-dom";
import {connect} from 'react-redux'
import {login} from '../store/user.redux'

function Home(props) {
    return <div>
        <h3>課程列表</h3>
        <ul>
            <li><Link to="/detail/js">js</Link></li>
            <li><Link to="/detail/java">java</Link></li>
        </ul>
    </div>
}

// 傳遞進來的路由器對象
function Detail(props) {
    console.log(props)
    // 1, history: 導(dǎo)航指令
    // 2, match: 獲取參數(shù)信息
    // 3,location:當(dāng)前url信息
    return <div>
        <h3>當(dāng)前課程: {props.match.params.course}</h3>
        <button onClick={props.history.goBack}>返回</button>
    </div>
}

function About(props) {
    return <div>
        <h3>個人中心</h3>
        <div>
            <Link to="/about/me">個人信息</Link>
            <Link to="/about/order">訂單查詢</Link>
        </div>

        <Switch>
            <Route path="about/me" component={() => (<div>me</div>)}></Route>
            <Route path="about/order" component={() => (<div>order</div>)}></Route>
            // 默認重定向
            <Redirect to="/about/me"></Redirect>
        </Switch>

    </div>
}

function NoMatch({location}) {
    return <div>404, {location.pathname}不存在 </div>
}

// 路由守衛(wèi) (高階組件, 實際是對Route的封裝)
// 希望用法 <PrivateRoute component={About}  path="/about"  ... />
const PrivateRoute = connect(state => ({isLogin: state.user.isLogin}))(
    ({component: Comp, isLogin, ...rest}) => {
        // 做認證
        // render: 根據(jù)條件動態(tài)渲染
        return (
            // rest剩余的props ,props中包含了conponent,  conponent優(yōu)先級會高于 render
            <Route {...rest} render={props => isLogin ? (<Comp/>) : (
                <Redirect to={{pathname: "/login", state: {redirect: props.location.pathname}}}/>)}/>
        )
    }
)

// function PrivateRoute({component: Comp, isLogin, ...rest}) {
//     // 做認證
//     // render: 根據(jù)條件動態(tài)渲染
//     return (
//         <Route {...rest} render={props => isLogin ? (<Comp/>) : (
//             <Redirect to={{pathname: "/login", state: {redirect: props.location.pathname}}}/>)}/>
//     )
// }

//登錄組件
const Login = connect(state => ({isLogin: state.user.isLogin, loading: state.user.isLogin}, {login: login}))
(({location, isLogin, login, loading}) => {
    const redirect = location.state.redirect || '/'
    if (isLogin) {
        return <Redirect to={redirect}/>
    }
    return (
        <div>
            <p>用戶登錄</p>
            <hr/>
            <button onClick={login} disabled={loading}>{loading ? '登錄中...' : '登錄'}</button>
        </div>
    )
})
// function Login({location, isLogin, login}) {
//     const redirect = location.state.redirect || '/'
//     if (isLogin) {
//         return <Redirect to={redirect}/>
//     }
//     return (
//         <div>
//             <p>用戶登錄</p>
//             <hr/>
//             <button onClick={login}>登錄</button>
//         </div>
//     )
// }

export default function RouterSample() {
    return <div>
        <BrowserRouter>
            <div>
                {/*導(dǎo)航鏈接*/}
                <ul>
                    <li>
                        <Link to="/">首頁</Link>
                        <Link to="/about">關(guān)于</Link>
                    </li>
                </ul>

                {/*路由配置: 路由既組件*/}
                {/*路由匹配默認是包容性質(zhì)*/}
                <Switch>
                    <Route exact path='/' component={Home}></Route>
                    <PrivateRoute path='/about' component={About}></PrivateRoute>
                    <Route path='/login' component={Login}></Route>
                    <Route path='/detail/:course' component={Detail}> </Route>
                    // 404沒有path, 必然匹配
                    <Route component={NoMatch}></Route>
                </Switch>
            </div>
        </BrowserRouter>
    </div>
}