大多數(shù)情況中，我們必須先驗(yàn)證登錄狀態(tài)才能進(jìn)入到主頁，所以需要保護(hù)式路由。這里，需要保護(hù)的路由是Admin，如果登錄沒通過則先進(jìn)入Login路由組件。

class App5 extends React.Component {
    render(){
        return (
            <div className="app5">
                <ul>
                    <li>
                        <Link to='/'>Home</Link>
                    </li>
                    <li>
                        <Link to='/category'>Category</Link>
                    </li>
                    <li>
                        <Link to='/products'>Products</Link>
                    </li>
                    <li>
                        <Link to='/admin'>Admin</Link>
                    </li>
                </ul>
                <Route exact path='/' component={Home} />
                <Route path='/category' component={Category} />
                <Route path='/products' component={Products} />
                <Route path='/login' component={Login} />

                {/*自定義路由*/}
                <PrivateRoute path='/admin' component={Admin} />
            </div>
        )
    }
}

const Home = props => <h2>This is Home {console.log('Home-Props')}{console.log(props)}</h2>

const Admin = () => <h2>Welcome to admin!</h2>


// 自定義路由
const PrivateRoute = (({component:Component,...rest}) => {
    return (
        <Route
            {...rest}
            render={props =>
                // 如果登錄驗(yàn)證通過則進(jìn)入Admin路由組件
                fakeAuth.isAuthenticated === true
                ?(<Component />)
                // 將from設(shè)置為Admin路由pathname，并傳遞給子組件Login
                :(<Redirect to={{pathname:'/login',state:{from:props.location.pathname}}} />)
            }
         />
    )
})



export default App5

Login路由組件如下

class Login extends React.Component {
    constructor(){
        super()
        this.state = {
            toAdmin:false
        }
    }

    login = () =>{
        fakeAuth.authenticate(() => {
            this.setState({
                toAdmin:true
            })
        })
    }

    render(){
        const from = this.props.location.state.from
        const toAdmin = this.state.toAdmin
        if(toAdmin) {
            return (
                <Redirect to={from} />
            )
        }
        return (
            <div className="login">
            {console.log(this.props)}
                <p>You must log in then go to the{from} </p>
                <button onClick={this.login}>
                    Log in
                </button>
            </div>
        )
    }
}

export default Login


export const fakeAuth = {
    // 驗(yàn)證狀態(tài)
    isAuthenticated:false,
    authenticate(cb){
        this.isAuthenticated = true
        setTimeout(cb,100)
    }
}

打印臺(tái)中 從Admin路由組件傳遞給子組件Login的Props如圖

Props

// 自定義路由
const PrivateRoute = (({component:Component,...rest}) => {
    return (
        <Route
            {...rest}
            render={props =>
                // 如果登錄驗(yàn)證通過則進(jìn)入Admin路由組件
                fakeAuth.isAuthenticated === true
                ?(<Component />)
                // 將from設(shè)置為Admin路由pathname，并傳遞給子組件Login
                :(<Redirect to={{pathname:'/login',state:{from:props.location.pathname}}} />)
            }
         />
    )
})

自定義路由傳遞給Login組件的state也在里面