ホームページ > 記事 > ウェブフロントエンド > React withrouterの使用法は何ですか
react withrouter は、コンポーネントを Route にラップし、「react-router」の 3 つの履歴、場所、一致オブジェクトを props オブジェクトに渡すために使用されます。導入構文は「import{withRouter}from」です。 . .」
このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。
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='app'> <NavLink to='/one/users'>HOME</NavLink> <NavLink to='/one/companies'>OTHER</NavLink> <Switch> <Route path='/one/:type?' component={One} /> <Redirect from='/' to='/one' exact /> <Route component={NotFound} /> </Switch> </div>) } } export default withRouter(App); //这里要执行一下WithRouter推奨学習: "
react ビデオ チュートリアル >>
以上がReact withrouterの使用法は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。