react中router路由重定向与高阶组件的手动跳转

文章目录

前言

上篇文章给大家介绍了react项目中路由的基础用法，今天给大家介绍关于router在实战项目中更多的知识

路由重定向

看下面的案例：
1.使用Redirect重定向首先要进行导入
2.可以看到这里我们点击登录会跳转到login页面，但是我们在里面添加Redirect标签，给to后面添加路径，也就是重定向到该路径。所以我们点击登录只会跳转/user

import React, {
    
     Component } from 'react'
import {
    
     BrowserRouter, Link, Route, Redirect } from 'react-router-dom'

export class Login extends Component {
    
    
  render() {
    
    
    return (
      <div>
          <h1>登录</h1>
          <Redirect to='/user'/>
      </div>
    )
  }
}

export class User extends Component {
    
    
  render() {
    
    
    return (
      <div>User 用户中心</div>
    )
  }
}

export class App extends Component {
    
    
  render() {
    
    
    return (
      <div>
          <BrowserRouter>
            <Link to='/login'>登录</Link>
            {
    
    /* <Link to='/user'>user</Link> */}

            <Route path='/login' component={
    
    Login}/>
            <Route path='/user' component={
    
    User}/>
          </BrowserRouter>
      </div>
    )
  }
}

export default App

看效果，访问login自动跳转到user页面

在这里插入图片描述

手动跳转

除了我们上面学的使用link进行跳转，我们还可以通过手动触发的形式进行路由跳转，下面我们一起来看看如何实现：
实现手动跳转有一个前提：,就是必须获取到history对象,这里的history不是window的history

来看代码：
1.首页，关于，用户中心三个页面都使用link进行跳转，这是我们原来的方法
2.在about页面，我们给跳转按钮绑定onClick事件，在jump中定义props，发现里面的内容就是路由的信息，所以可以直接props.history.push(’/user’)让其跳转到user

import React, {
    
     Component } from 'react'
import {
    
    BrowserRouter, Link, Route, Switch} from 'react-router-dom'

function Home(props) {
    
    
    console.log(props)
    return <h1>Home</h1>
}

function User(props) {
    
    
    console.log(props)
    return <h1>User</h1>
}

const About = (props) => {
    
    
    const jump = () => {
    
    
        console.log(props)
        props.history.push('/user')
    }
    return (
        <div>
            <h2>About</h2>
            <button onClick={
    
    e=>{
    
    jump()}}>跳转</button>
            <Home/>
        </div>
    )
}


export class App extends Component {
    
    
    render() {
    
    
        return (
            <div>
                <BrowserRouter>
                    <ul>
                        <li><Link to='/home'>首页</Link></li>
                        <li><Link to='/about'>关于</Link></li>
                        <li><Link to='/user'>用户中心</Link></li>
                    </ul>

                    <Switch>
                        <Route path='/home' exact component={
    
    Home} />
                        <Route path='/about' component={
    
    About} />
                        <Route path='/user' component={
    
    User} />
                    </Switch>
                </BrowserRouter>
            </div>
        )
    }
}

export default App

看一下效果：

在这里插入图片描述
对于上面的代码，我们在home组件中打印的props为空，但是about中打印的却有值。因为home是普通渲染的组件，是不可以直接获取到history、location、match对象的。那么如果普通渲染的组件也希望获取到对应的对象和属性要怎么做？

在组件中增加属性,通过高阶组件去添加属性
react-dom-router也是通过高阶组件的形式为我们的组件添加一些相关的属性的
使用withRouter高阶组件进行包裹

高阶组件的手动跳转

这里我们需要用到withRouter，直接在前面引入即可

import {
    
     BrowserRouter, Link, Route, Switch, withRouter } from 'react-router-dom'

然后进行使用：
1.定义 WithHomeRouter = withRouter(Home)，传入home
2.在原来渲染home组件的地方就可以直接使用< WithHomeRouter/>组件

const WithHomeRouter = withRouter(Home)

function User(props) {
    
    
    return <h1>User</h1>
}

const About = (props) => {
    
    
    const jump = () => {
    
    
        console.log(props) // 路由信息对象，里面有history、location、match
        // 通过路由跳转(不论是地址栏输入地址还是link跳转还是手动)展示的组件才会有对应的路由信息
        props.history.push('/user')
    }
    return (
        <div>
            <h2>About</h2>
            <button onClick={
    
    e=>{
    
    jump()}}>跳转</button>
            {
    
    /* 如果是普通组件渲染则没有路由信息，如果需要普通组件拥有路由信息，则可以使用withRouter这个高阶组件来实现 */}
            <WithHomeRouter/>
        </div>
    )
}

原来我们点击关于是没有打印的props的信息的，使用withRouter高阶组件进行包裹之后，就可以打印出来路由的信息：

在这里插入图片描述

好了，本篇文章到这里结束了，如果对你有帮助，可以点赞关注支持一下~~
后续我还会带来更多前端知识内容