Router route redirection and manual jump of higher-order components in react

foreword

The last article introduced you to the basic usage of routing in the react project. Today, I will introduce you to more knowledge about router in actual projects.

route redirection

Look at the following case:
1. Use Redirect redirection to import first
2. You can see here that we click on login to jump to the login page, but we add the Redirect tag inside, and add a path to the back of to, that is, redirect to the path. So when we click on login, it will only jump 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

To see the effect, visit the login to automatically jump to the user page

Manual jump

In addition to using the link to jump as we learned above, we can also perform routing jumps in the form of manual triggering. Let's take a look at how to achieve it:
There is a prerequisite for manual jumping: , that the history object must be obtained, here The history is not the history of the window

Let's look at the code:
1. The three pages of the home page, about, and user center all use link to jump. This is our original method
. 2. On the about page, we bind the onClick event to the jump button, and define props in the jump. It is found that the content inside is the routing information, so you can directly props.history.push('/user') to let it jump to 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

Take a look at the effect:

For the above code, the props we print in the home component are empty, but there are values ​​printed in about. Because home is a common rendering component, it is not possible to directly obtain the history, location, and match objects. So what if the commonly rendered components also want to get the corresponding objects and properties?

1. Add properties to components and add properties through higher-order components
2. react-dom-router also adds some related properties to our components in the form of high-order components
3. Wrap it with the withRouter higher-order component

Manual jump to higher order components

Here we need to use withRouter, which can be introduced directly in front

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

Then use:
1. Define WithHomeRouter = withRouter(Home), pass in home
2. You can directly use the <WithHomeRouter/> component where the home component was originally rendered

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>
    )
}

It turns out that we click on the information about props that are not printed. After wrapping with the withRouter high-order component, we can print out the routing information:

Well, this article is over here. If it is helpful to you, you can like, follow and support~~
I will bring more front-end knowledge content in the future.