0
点赞
收藏
分享

微信扫一扫

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

蚁族的乐土 2022-03-25 阅读 111

文章目录

前言

上篇文章给大家介绍了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

看一下效果:

  1. 在组件中增加属性,通过高阶组件去添加属性
  2. react-dom-router也是通过高阶组件的形式为我们的组件添加一些相关的属性的
  3. 使用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高阶组件进行包裹之后,就可以打印出来路由的信息:

在这里插入图片描述

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

举报

相关推荐

0 条评论