React-router重定向

重定向有两种方式，第一种是通过 <Redirect> 标签实现，第二种是通过编程式导航方式实现。

【<Redirect> 标签】

<Redirect to={'/default'}/>

【编程式导航方式】

this.props.history.push('/default')

两个的效果是一样的

/**
 * Created by 王冬 on 2018/2/14.
 * QQ: 20004604
 * weChat: qq20004604
 * 功能说明：
 * 重定向
 */
import React from 'react'
import {HashRouter as Router, Link, Redirect, Route} from 'react-router-dom'

const DefaultPage = () => <div>
    这里是默认页面
</div>

class HaveRedirect extends React.Component {
    toRedirect = () => {
        this.props.history.push(`${this.props.match.url.replace(/\/[^/]+$/, '')}/default`)
    }

    render() {
        return <div>
            <button onClick={this.toRedirect}>7、编程式导航跳转方式</button>
            <Router>
                <div>
                    {/*  点击后，跳转 url 到 /redirect 这个路径；
                      *  而这个路径匹配结果是一个路由，这个路由的内容是一个Redirect标签；
                      *  Redirect在渲染时候触发跳转，因此跳转到default路径中
                      *  */}
                    <Link to={`${this.props.match.url}/redirect`}>点击跳转到重定向页面，然后再跳转到初始页面</Link>
                    <hr/>
                    <Route path={`${this.props.match.url}/redirect`} component={(() =>
                            <Redirect to={`${this.props.match.url.replace(/\/[^/]+$/, '')}/default`}/>
                    )}></Route>
                </div>
            </Router>
        </div>
    }
}

const RedirectExample = props => (
    <Router>
        <div>
            <ul>
                <li><Link to={`${props.match.url}/default`}>默认页面</Link></li>
                <li><Link to={`${props.match.url}/haveRedirect`}>重定向父页面</Link></li>
            </ul>
            <hr/>
            <Route path={`${props.match.url}/default`} component={DefaultPage}/>
            <Route path={`${props.match.url}/haveRedirect`} component={HaveRedirect}/>
        </div>
    </Router>
)


export default RedirectExample

猜你喜欢