react-router实现重定向多种方式（补充中）

正如我们所知，react-router是用来管理路由的，，在路由管理中，一个非常重要的功能就是重定向，下面列举一些react-router实现重定向的方法

1. 使用Route组件中继承自Router组件的props.history

在Router组件的子组件，其props会包含history，location，match属性，三个属性中有和路由相关的信息，这里我们使用history
props打印出来的内容如下

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router,Route} from 'react-router-dom'

class AppRouter extends React.Component{
    render(){
        return(
            <Router>
                <Route exact path='/' component={LoginOut}/>
                <Route path='/loginIn' component={LoginIn}/>
            </Router>
        )
    }
}

class LoginIn extends React.Component{
    constructor(props){
        super(props);
        console.log('props: ', props);
        this.loginOut=this.loginOut.bind(this);
    }
    loginOut(){
        this.props.history.push('/')
    }
    render(){
        return <div>
                    <p>welcome</p>
                    <button onClick={this.loginOut}>login out</button>
                </div>
    }
}

class LoginOut extends React.Component{
    constructor(props){
        super(props);
        console.log('props: ', props);
        this.loginIn=this.loginIn.bind(this);
    }
    loginIn(){
        this.props.history.push('/loginIn')
    }
    render(){
        return <div>
                    <p>you need to login</p>
                    <button onClick={this.loginIn}>login in</button>
                </div>
    }
}

ReactDOM.render(<AppRouter />, document.getElementById('root'))

2. 使用react-router-dom里面的useHistory()

useHistory()用在函数组件中，当我在class组件中使用该API时，会发生报错

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router,Route,useHistory} from 'react-router-dom'

class AppRouter extends React.Component{
    render(){
        return(
            <Router>
                <Route exact path='/' component={LoginOut}/>
                <Route path='/loginIn' component={LoginIn}/>
            </Router>
        )
    }
}

function LoginIn(props){
    let history=useHistory();
    function loginOut(){
        history.push('/')
    }
    return (
        <div>
            <p>welcome</p>
            <button onClick={loginOut}>login out</button>
        </div>
    )
}

function LoginOut(props){
    let history=useHistory();
    function loginIn(){
        history.push('/loginIn')
    }
    return (
        <div>
            <p>you need to login</p>
            <button onClick={loginIn}>login in</button>
        </div>
    )
}

ReactDOM.render(<AppRouter />, document.getElementById('root'))

3. 使用react-router-dom里面的Redirect组件

Redirect组件在react-devtools中观察不到，当该组件出现的时候，就会跳转到其to属性对应的路由，所以可以在render中使用条件语句或三元运算符来将该组件添加到当前的组件中来达到重定向的目的

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

class App extends React.Component{
  render(){
    return (
      <Router>
        <li>
          <Link to="/">Home</Link>
        </li>
        <li>
          <Link to="/about">About</Link>
        </li>
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About}/>
          <Route path="/more" component={More}/>
        </Switch>
      </Router>
    )
  }
}

class Home extends React.Component{
  constructor(props){
    super(props);
    this.state={
      isMore:false
    }
    this.moreContent=this.moreContent.bind(this);
  }
  moreContent(){
    this.setState({
      isMore:true
    })
  }
  render(){
    return (
      <>
        <p>Home</p>
        <button onClick={this.moreContent}>more content</button>
        {/* 当点击按钮的时候，将isMore改为true，使Redirect添加到当前组件中，完成跳转 */}
        {this.state.isMore?(<Redirect to="/more"/>):undefined}
      </>
    )
  }
}

class About extends React.Component{
  render(){
    return (
      <p>About</p>
    )
  }
}

class More extends React.Component{
  render(){
    return (
      <p>More</p>
    )
  }
}


ReactDOM.render(<App />,document.getElementById('root'))