React-路由2

路由重定向

路由重定向使用的是react-router-dom的Redirect组件

import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom'

import React from 'react'

// 定义一个登录组件
function Login() {
    return (
        <div>
            登录界面组件
        </div>
    )
}


// 登录成功组件
function LoginSuccess () {
    return (
        <div>
            登陆成功界面组件
        </div>
    )
}

function Loginverify() {
    let verify = {
        pathname: 'verify',
        state: 'success'
    }
    return(
        <div>
            <p>登录验证组件</p>
            <Link to={verify}>登录验证</Link>
        </div>
    )
}

// 验证界面
function Verify(props) {
    console.log(props);
    if (props.location.state === 'success') {
        return <Redirect to='loginSuccess'></Redirect>
    } else {
        return <Redirect to="login"></Redirect>
    }
}


export default class App extends React.Component {
    render() {
        return(
            <div>
                <Router>
                    <Route path="/" exact component={Loginverify}></Route>
                    <Route path="/verify" exact component={Verify}></Route>
                    <Route path="/loginSuccess" exact component={LoginSuccess}></Route>
                    <Route path="/LOGIN" exact component={Login}></Route>
                </Router>
            </div>
        )
    }
}

使用JS进行界面跳转

import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom'

import React from 'react'

// 定义一个登录组件
function Login() {
    return (
        <div>
            登录界面组件
        </div>
    )
}


// 登录成功组件
function LoginSuccess () {
    return (
        <div>
            登陆成功界面组件
        </div>
    )
}

function Loginverify() {
    let verify = {
        pathname: 'verify',
        state: 'success'
    }
    return(
        <div>
            <p>登录验证组件</p>
            <Link to={verify}>登录验证</Link>
        </div>
    )
}

// 验证界面
function Verify(props) {
    console.log(props);
    if (props.location.state === 'success') {
        return <Redirect to='loginSuccess'></Redirect>
    } else {
        return <Redirect to="login"></Redirect>
    }
}

class Push extends React.Component {
    clickEvent = () => {
        console.log(this.props);
        this.props.history.push('/login')
    }
    render() {
        return (
            <div>
                <button onClick={this.clickEvent}>跳转登陆界面</button>
            </div>
        )
    }
}


export default class App extends React.Component {

    render() {
        return(
            <div>
                <Router>
                    <Route path="/" exact component={Loginverify}></Route>
                    <Route path="/verify" exact component={Verify}></Route>
                    <Route path="/loginSuccess" exact component={LoginSuccess}></Route>
                    <Route path="/login" exact component={Login}></Route>
                    <Route path="/push" exact component={Push}></Route>
                </Router>
            </div>
        )
    }
}

可以跳转过程中添加参数

import { BrowserRouter as Router, Link, Route, Redirect, Switch } from 'react-router-dom'

import React from 'react'

// 定义一个登录组件
function Login() {
    return (
        <div>
            登录界面组件
        </div>
    )
}


// 登录成功组件
function LoginSuccess () {
    return (
        <div>
            登陆成功界面组件
        </div>
    )
}

function Loginverify() {
    let verify = {
        pathname: 'verify',
        state: 'success'
    }
    return(
        <div>
            <p>登录验证组件</p>
            <Link to={verify}>登录验证</Link>
        </div>
    )
}

// 验证界面
function Verify(props) {
    console.log(props);
    if (props.location.state === 'success') {
        return <Redirect to='loginSuccess'></Redirect>
    } else {
        return <Redirect to="login"></Redirect>
    }
}

class Push extends React.Component {
    clickEvent = () => {
        console.log(this.props);
        this.props.history.push('/login', 'hhh')
    }
    render() {
        return (
            <div>
                <button onClick={this.clickEvent}>跳转登陆界面</button>
            </div>
        )
    }
}


export default class App extends React.Component {

    render() {
        return(
            <div>
                <Router>
                    <Switch>
                        <Route path="/" exact component={Loginverify}></Route>
                        <Route path="/verify" exact component={Verify}></Route>
                        <Route path="/loginSuccess" exact component={LoginSuccess}></Route>
                        <Route path="/login" exact component={Login}></Route>
                        <Route path="/push" exact component={Push}></Route>
                        <Route path="/push" exact component={Push}></Route>
                    </Switch>
                </Router>
            </div>
        )
    }
}

可以使用go(1)和go(-1)进行前进后退，使用replace进行路由替换

Switch组件

正常来说，react的匹配不会支配对一个，而是会来纳许匹配，需要用Switch组件进行约束

import { BrowserRouter as Router, Link, Route, Redirect } from 'react-router-dom'

import React from 'react'

// 定义一个登录组件
function Login() {
    return (
        <div>
            登录界面组件
        </div>
    )
}


// 登录成功组件
function LoginSuccess () {
    return (
        <div>
            登陆成功界面组件
        </div>
    )
}

function Loginverify() {
    let verify = {
        pathname: 'verify',
        state: 'success'
    }
    return(
        <div>
            <p>登录验证组件</p>
            <Link to={verify}>登录验证</Link>
        </div>
    )
}

// 验证界面
function Verify(props) {
    console.log(props);
    if (props.location.state === 'success') {
        return <Redirect to='loginSuccess'></Redirect>
    } else {
        return <Redirect to="login"></Redirect>
    }
}

class Push extends React.Component {
    clickEvent = () => {
        console.log(this.props);
        this.props.history.push('/login')
    }
    render() {
        return (
            <div>
                <button onClick={this.clickEvent}>跳转登陆界面</button>
            </div>
        )
    }
}


export default class App extends React.Component {

    render() {
        return(
            <div>
                <Router>
                    <Route path="/" exact component={Loginverify}></Route>
                    <Route path="/verify" exact component={Verify}></Route>
                    <Route path="/loginSuccess" exact component={LoginSuccess}></Route>
                    <Route path="/login" exact component={Login}></Route>
                    <Route path="/push" exact component={Push}></Route>
                    <Route path="/push" exact component={Push}></Route>
                </Router>
            </div>
        )
    }
}

import { BrowserRouter as Router, Link, Route, Redirect, Switch } from 'react-router-dom'

import React from 'react'

// 定义一个登录组件
function Login() {
    return (
        <div>
            登录界面组件
        </div>
    )
}


// 登录成功组件
function LoginSuccess () {
    return (
        <div>
            登陆成功界面组件
        </div>
    )
}

function Loginverify() {
    let verify = {
        pathname: 'verify',
        state: 'success'
    }
    return(
        <div>
            <p>登录验证组件</p>
            <Link to={verify}>登录验证</Link>
        </div>
    )
}

// 验证界面
function Verify(props) {
    console.log(props);
    if (props.location.state === 'success') {
        return <Redirect to='loginSuccess'></Redirect>
    } else {
        return <Redirect to="login"></Redirect>
    }
}

class Push extends React.Component {
    clickEvent = () => {
        console.log(this.props);
        this.props.history.push('/login')
    }
    render() {
        return (
            <div>
                <button onClick={this.clickEvent}>跳转登陆界面</button>
            </div>
        )
    }
}


export default class App extends React.Component {

    render() {
        return(
            <div>
                <Router>
                    <Switch>
                        <Route path="/" exact component={Loginverify}></Route>
                        <Route path="/verify" exact component={Verify}></Route>
                        <Route path="/loginSuccess" exact component={LoginSuccess}></Route>
                        <Route path="/login" exact component={Login}></Route>
                        <Route path="/push" exact component={Push}></Route>
                        <Route path="/push" exact component={Push}></Route>
                    </Switch>
                </Router>
            </div>
        )
    }
}