Reactのnpmにルーティングをインストールする方法

react では、npm は「npm iact-router-dom -S」を使用してルーティングをインストールできます。パラメーター i は install の省略形で、現在のバージョンに最も一致する npm パッケージのバージョン番号を検出します。 、パラメータ「-S」は「--save」の略称で、packages.jsonにモジュールを書き込みます。

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

react の npm にルーティングをインストールする方法

1. React ルーティングのインストール

npm i react-router-dom@5.0 -S

インストールが完了したら、参照用に App.js を入力します。

ルーティング関連コンポーネントをインポートします (最初の文字は大文字にする必要があります)

インポート ハッシュ ルート エイリアス ルーター

ルート ルーティング ページ

NavLink ナビゲーション リンク

import { HashRouter as Router, Route, NavLink} from 'react-router-dom'

2. 反応ルーティングの使用

#例:

import {HashRouter as Router , Route , NavLink} from 'react-router-dom'
function App(){
return (<Router >
{/* 导航 */}
<div>
{/*exact 默认显示*/}
<NavLink to=&#39;/&#39; exact>首页</NavLink>
<NavLink to=&#39;/about&#39;>关于</NavLink>
</div>
{/* 路由页面 */}
<Route  path="/" exact component={Home}></Route >
<Route  path="/about" component={About}></Route >
</Router >)
}
export default App;
function Home(){
return <div>首页页面</div>
}
function About(){
return <div>关于页面</div>
}

これは、ビューを更新しますが、ページを再リクエストすることなく実現されます。さらに詳しく知りたい場合は、クリックして公式ドキュメントを参照してください。

推奨される学習: 「

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

以上がReactのnpmにルーティングをインストールする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。