React withrouterの使用法は何ですか

react withrouter は、コンポーネントを Route にラップし、「react-router」の 3 つの履歴、場所、一致オブジェクトを props オブジェクトに渡すために使用されます。導入構文は「import{withRouter}from」です。 . .」

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react withrouter の使用法とは何ですか

withRouter の機能は、何かが Router ではない場合に、ページにジャンプするためにそれに依存する必要があることです。ページのロゴ、ホームページに戻ります。このとき、withRouter を使用してそれを行うことができます。withRouter、

関数を使用してコンポーネントを Route にラップし、その後 3 つのオブジェクトの履歴、位置、および反応の一致を確認します。 -router がこのコンポーネントに配置されます。props 属性内に配置されます (私の理解では、後でプログラミング ナビゲーションを記述できると考えています。vue が不要な場合は、this.$router.push() をグローバルに使用して完成させることができます)

react-router の履歴、場所、一致を変更します。3 つのオブジェクトが props オブジェクトに渡されます。

デフォルトでは、ルーティング マッチングによってレンダリングされるコンポーネントに this.props が存在する必要があります。その場合のみ、ルーティング パラメーターを含めることができ、関数ジャンプの書き込みを使用して this.props.history を実行できます。push('/detail') は、ルートに対応するページにジャンプします。

ただし、すべてのコンポーネントがそうであるわけではありません。ルートに直接接続されています (ルートを介してこのコンポーネントにジャンプします)。これらのコンポーネントがルーティング パラメーターを必要とする場合は、withRouter を使用します。ルーティング パラメーターをこのコンポーネントに渡すことができ、this.props

## を使用できます。 #withRouterの使い方:

例:app.jsページはルーティングされずにここに飛びますが、ブラウザにアドレスを入力して直接開きます withRouterを使用しない場合はこれ。このコンポーネントの props は空であり、props 内の履歴、場所、一致、および次のような他のメソッドは実行できません。 Functional Jump Turn this.props.push('/detail')

Router でのセットアップ非常にシンプルで、必要なステップは 2 つだけです。次のように、1 紹介、2 実行です。

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

推奨学習: "

react ビデオ チュートリアル >>

以上がReact withrouterの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。