Apakah kegunaan react withrouter

react withrouter digunakan untuk membungkus komponen ke dalam Route dan menghantar tiga sejarah, lokasi dan objek padan "react-router" ke dalam objek props Sintaks pengenalan ialah "import{withRouter}from. .

Persekitaran pengendalian tutorial ini: Sistem Windows 10, bertindak balas versi 17.0.1, komputer Dell G3.

Apakah kegunaan react withrouter?

Fungsi withRouter ialah jika sesuatu itu bukan Router, tetapi kita perlu bergantung padanya untuk melompat ke halaman, seperti mengklik pada logo halaman, kembali halaman Utama, anda boleh gunakan denganRouter pada masa ini,

digunakan untuk membungkus komponen ke dalam Laluan, dan kemudian sejarah tiga objek, lokasi dan padanan penghala tindak balas. akan dimasukkan ke dalam komponen ini dalam atribut props (Pemahaman saya ialah anda boleh menulis navigasi pengaturcaraan kemudian. Jika anda tidak mahu vue, anda boleh menggunakan ini.$router.push() secara global)

Tukar sejarah, lokasi, padanan penghala tindak balas Ketiga-tiga objek dihantar ke objek props

Secara lalai, this.props mesti wujud dalam komponen yang diberikan oleh padanan laluan, dan hanya kemudian ia boleh mempunyai parameter laluan dan gunakan kaedah lompat fungsi untuk melaksanakan ini.props.history push('/detail') melompat ke halaman yang sepadan dengan laluan

Walau bagaimanapun, tidak semua komponen disambungkan terus ke laluan (lompat. kepada komponen ini melalui laluan). Apabila komponen ini memerlukan parameter penghalaan, gunakan denganPenghala Anda boleh memasukkan parameter penghalaan kepada komponen ini. Pada masa ini, anda boleh menggunakan ini. :

Sebagai contoh, halaman app.js tidak dihalakan Ia melompat ke atas, tetapi terus membuka alamat dari penyemak imbas Jika anda tidak menggunakan denganPenghala, this.props bagi komponen ini kosong. dan sejarah, lokasi, padanan dan kaedah lain dalam prop tidak boleh dilaksanakan, seperti: Lompat fungsi Turn this.props.push('/detail')

Menyediakan denganRouter adalah sangat mudah dan hanya memerlukan dua langkah: 1 pengenalan, 2 pelaksanaan, seperti berikut

Pembelajaran yang disyorkan: "

tutorial video bertindak balas

import React,{Component} from 'react'
import {Switch,Route,NavLink,Redirect,withRouter} from 'react-router-dom' //引入withRouter
import One from './One'
import NotFound from './NotFound'
class App extends Component{
    //此时才能获取this.props,包含（history, match, location）三个对象
    console.log(this.props);  //输出{match: {…}, location: {…}, history: {…}, 等}
    render(){return (<div className=&#39;app&#39;>
            <NavLink to=&#39;/one/users&#39;>HOME</NavLink>
            <NavLink to=&#39;/one/companies&#39;>OTHER</NavLink>
            <Switch>
                <Route path=&#39;/one/:type?&#39; component={One} />
                <Redirect from=&#39;/&#39; to=&#39;/one&#39; exact />
                <Route component={NotFound} />
            </Switch>
        </div>)
    }
}
export default withRouter(App);  //这里要执行一下WithRouter

》

Atas ialah kandungan terperinci Apakah kegunaan react withrouter. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!