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

最新推荐文章于 2024-12-22 20:13:44 发布

原创最新推荐文章于 2024-12-22 20:13:44 发布 · 1.2w 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

React 专栏收录该内容

18 篇文章

订阅专栏

本文详细介绍React Router中实现重定向的三种方法：利用Route组件的history属性、使用useHistory()函数以及Redirect组件。通过具体代码示例，帮助读者理解和掌握在React应用中如何灵活运用这些方法进行页面跳转。

正如我们所知，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'))