React-router全解析

第一步、React-router 初体验

1. 安装 react-router-dom :

cnpm install react-router-dom --save

2. 引入需要的路由组件：

import { BrowserRouter, Route, Link } from 'react-router-dom';

3. 创建简单跳转路由（核心代码）

<BrowserRouter>
    <div>
         <ul>
            <li>
                <Link to="/">北京</Link>
            </li>
            <li>
                <Link to="/sz">深圳</Link>
            </li>
            <li>
                <Link to='/sh'>上海</Link>
            </li>  
        </ul>

        <Route path="/" exactcomponent={BJ} ></Route>
        <Route path="/sz" component={SZ} ></Route>
        <Route path="/sh" component={SH} ></Route>
    </div>
</BrowserRouter>

4. 展示效果：

第二步、React-router 进阶体验

1. 路由重定向：Redirect

2. 404页面的制作：Switch

/*只渲染命中的第一个Route*/
<Switch>
    <Route path="/" exact component={BJ} ></Route>
    <Route path="/sz" component={SZ} ></Route>
    <Route path="/sh" component={SH} ></Route>
    <Route path="/:location" component={404} ></Route>
</Switch>

3. 合并reducer

（1） reducer.js

import { combineReducers } from 'redux';
import { counter } from './index.redux.js';
import { auth } from './Auth.redux.js';

export default combineReducers({counter,auth});

（2） index.js

...
import reducer from './reducer.js'
const store = createStore(reducer, compose(
    applyMiddleware(thunk),
    window.devToolsExtenson ? window.devToolsExtenson() : f=>f
));

console.log(store.getState()); 
//打印出 ：{ auth : {isAuth: false, user: "movi"} , counter:10 }

4. Redux登陆校验（如果没有登录直接跳转到登录页面）

（1）Dashboard.js 组件

class Dashboard extends Component{
    render(){
        console.log(this.props);
        const match = this.props.match;
        const redirectToLogin = <Redirect to="/login"></Redirect>
        const app = (
            <div>
                <h3>面板页面</h3>
                <button onClick={this.lououtAccount}>注销账号</button>
                <ul>
                    <li>
                        <Link to={`${match.url}/`}>北京</Link>
                    </li>
                    <li>
                        <Link to={`${match.url}/sz`}>深圳</Link>
                    </li>
                    <li>
                        <Link to={`${match.url}/sh`}>上海</Link>
                    </li>  
                </ul>

                <Route path={`${match.url}/`} component={BJ} exact ></Route>
                <Route path={`${match.url}/sz`} component={SZ} ></Route>
                <Route path={`${match.url}/sh`} component={SH} ></Route>
            </div>
        );
        return this.props.isAuth ? app : redirectToLogin;
    }

    lououtAccount = ()=>{
        this.props.logout();
    }
}

（2）Auth.js 组件

class Auth extends Component{
   /* constructor(props){
        super(props);
    }*/
    render(){
        console.log(this.props);
        return (
            <div>
                { this.props.isAuth ? <Redirect to="/dashboard" /> : null }
                <h3>目前您还没有权限，需要登录才能查看！</h3>
                <button onClick={ this.handleClick }>点击登陆</button>
            </div>
        )
    }
    handleClick = ()=>{
        this.props.login();
        console.log(this.props);    
    }
}

（3）实现效果

猜你喜欢