withRouter使用

import React from 'react';
import {Switch,NavLink,Route,Redirect,withRouter} from 'react-router-dom';
import Detail from './Detail';
import Login from './Login'
import User from './User';
import MyRoute from './MyRoute'
class Header extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>
                <NavLink to='/login'>我是登錄頁</NavLink>
                <br/>
                <NavLink to="/detail/1">我是分頁一</NavLink>
                <br/>
                <NavLink to="/user">我是用戶頁</NavLink>
                <br/>
                <Switch>
                    <Redirect from='/' to="/login" exact />
                    <Route path='/login' component={Login}/>
　　　　　　　　　　　　//權限路由 使用
                    <Route path='/detail/:id?' render={
                        (props)=>{
                            return sessionStorage.getItem('user')?
                            <Route  component={Detail} {...props}/>:<Redirect to='/login'/>
                        }
                    }/>
　　　　　　　　　　　　//權限路由使用
                    <Route path='/user' render={
                        (props)=>{
                            return sessionStorage.getItem('user')?
                            <Route component={User} {...props}/>:<Redirect to='/login'/>
                        }
                    }/>
                </Switch>
            </div>
        )
    }
}

export default withRouter(Header);

這樣使用很麻煩，所以封裝組件進行復用

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

class MyRoute extends React.Component{
    constructor(props){
        super(props);
    }
    render() {
        console.log(this.props)
　　//利用組件傳值的特性封裝成組件利用組件進行封裝
    let {path,component:Com} = this.props;
      return (
        <Route path={path} render={
            (props)=>{
                return sessionStorage.getItem('user') ?
                <Com {...props}/> :<Redirect to="/login" />
            }
        }/>
      )
    }
}

export default MyRoute;

login.js

import React from 'react';

class Detail extends React.Component{
    constructor(props){
        super(props);
        this.login = this.login.bind(this);
        console.log(this.props);
    };
    login(){
        let username = this.node.value;
        if(username==='admin'){
            sessionStorage.setItem('user','admin'); 
        }
        this.props.history.push('/user')
　　　　　　//編程式導航類似vue 在使用withRouter以后
    };
    render(){
        return (
            <div>
　　　　　　　　　　　　//簡易的寫法
                <input type="text" ref={node=>this.node=node}/>
                <button onClick={this.login}>登錄</button>
            </div>
        )
    }
}

export default Detail;

user.js

import React from 'react';

class User extends React.Component{
    quit(){
        sessionStorage.clear();
　　　　　　//清除session並導航到登錄頁面 this.props.history.push('/login');
    }
    render() {
        console.log(this.props);
      return (
        <div>
            <input type="button" value="退出" onClick={this.quit.bind(this)}/>
        </div>
      )
    }

};

export default User;

 

這是簡化demo以后的代碼

import React from 'react';
import {Switch,NavLink,Route,Redirect,withRouter} from 'react-router-dom';
import Detail from './Detail';
import Login from './Login'
import User from './User';
import MyRoute from './MyRoute'
class Header extends React.Component{
    constructor(props){
        super(props);
    }
    render(){
        return(
            <div>
                <NavLink to='/login'>我是登錄頁</NavLink>
                <br/>
                <NavLink to="/detail/1">我是分頁一</NavLink>
                <br/>
                <NavLink to="/user">我是用戶頁</NavLink>
                <br/>
                <Switch>
                    <Redirect from='/' to="/login" exact />
                    <Route path='/login' component={Login}/>
　　　　　　　　　　　　//使用了封裝的組件 該組件利用組件傳值的特性
                    <MyRoute path='/detail/:id?' component={Detail} />
                    <MyRoute path='/user' component={User}/>
                </Switch>
            </div>
        )
    }
}

export default withRouter(Header);