SPAシングルページアプリケーションAPP：アドレスバー情報変更コンポーネントの変更
1.履歴ライブラリの使用
知識ポイント1：アドレスバーの履歴レコードはスタックの形式であり、履歴レコードは各ページジャンプにプッシュされます
歴史の基本的な使い方
<body>
<a href="http://www.atguigu.com" onclick="return push('/test1') ">push test1</a><br><br>
<button onClick="push('/test2')">push test2</button><br><br>
<button onClick="replace('/test3')">replace test3</button><br><br>
<button onClick="back()"><= 回退</button>
<button onClick="forword()">前进 =></button>
<script type="text/javascript" src="https://cdn.bootcss.com/history/4.7.2/history.js"></script>
<script type="text/javascript">
<!-- 方法一，直接使用H5推出的history身上的API let history = History.createBrowserHistory() -->
<!-- 方法二，hash值（锚点）-->
let history = History.createHashHistory()
<!--向栈里面添加一条记录-->
function push (path) {
history.push(path)
return false
}
<!--替代最新的一条历史记录-->
function replace (path) {
history.replace(path)
}
<!--反回上一条记录-->
function back() {
history.goBack()
}
<!--返回吓一条记录-->
function forword() {
history.goForward()
}
<!--添加路径的监听-->
history.listen((location) => {
console.log('请求路由路径变化了', location)
})
</script>
</body>
2.Reactの公式ライブラリヤーンはreact-router-domを追加します
組み込みライブラリの導入：react-router-domから{Route、NavLink}をインポートします
注：RouteとNavLinkはreact-router-domによってカプセル化されたコンポーネントであるため、最初の文字は大文字になります。
1.書き込みルーティング（アプリ構築で使用）：
ルートに対応するDOMは、ページのナビゲーションバーです。
ネイティブHTMLでは、別のページにジャンプします
<a className="list-group-item" href="./about.html">About</a>
<a className="list-group-item active" href="./home.html">Home</a>
Reactのルーティングリンクによるコンポーネントの切り替え-ルーティングリンクの書き込み
注：リンク===》 NavLInkは、ブートストラップの使用時にフォーカスを取得すると、Navlinkタグがアクティブなクラス名を自動的に追加するためです。フォーカスDOMにフィードしてスタイルを追加できます
<NavLink activeClassName="atguigu" className="list-group-item" to="/about">About</NavLink>
<NavLink activeClassName="atguigu" className="list-group-item" to="/home">Home</NavLink>
2.ルーティングの登録（アプリ構築で使用）：
登録したルートに対応するDOMがページの表示バーです
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
3.ヒント：
a。エントリファイルで、ルーティングコンポーネントを含む一般コンポーネントは、<ルーティングコンポーネントを含む一般コンポーネント/>のレイヤーでラップする必要があります。
登録と書き込みルーティングコンポーネントを使用する場合は、すべてのルーティングコンポーネントを同じラベルに登録して書き込む必要があります。
import {BrowserRouter} from 'react-router-dom'
//引入App
import App from './App'
ReactDOM.render(
<BrowserRouter>
<App/>
</BrowserRouter>,
document.getElementById('root')
)
b。ルーティングコンポーネントは、srcの下のpagesフォルダーに配置されます。
一般的なコンポーネントは、componentsフォルダーに配置されます
c。ルーティングが確立されている場合でも彼はまだデータを送信せずに彼のプロでデータを受信することができます
歴史|| 場所|| 一致
一般的なコンポーネントはデータを渡さず、それらのpeopsはデータを受け入れることができません
4.MyNavLinkのパッケージ
MyNavLinkの使用（アプリ構築で使用）
<!--在React中靠路由链接实现切换组件--编写路由链接-->
<MyNavLink to="/about" a=1 b=2 c=3 >About</MyNavLink>
<MyNavLink to="/home" a=22 b=33 c=44 >Home</MyNavLink>
MyNavLinkのパッケージ
import React, { Component } from 'react'
import {NavLink} from 'react-router-dom'
export default class MyNavLink extends Component {
render() {
return (
<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
<!--吧路由组件独有的属性传递过来渲染到 NAVLink 组件中，-->
<!--标签体内容通过 childen=标签体内容 传递进来-->
)
}
}
注：ルーティングコンポーネントの同じ汎用行をMyNavLinkコンポーネントに配置できます。ルーティングコンポーネントを使用する場合は、一意のクラス名とデータのみを渡す必要があります。
About 路由组件的 this.props ======> { to="/about"，a=1，b=2，c=3，childen="About" }
Home 路由组件的 this.props ======> { to="/home"，a=22，b=33，c=44，childen="Home" }
<MyNavLink to = "/ about">バージョン情報</ MyNavLink>バージョン情報タグ本体はタグ属性です：childen = "About"
属性を転送する場合、属性をMyNavLinkタグに直接書き込み、プロを介してMyNavLinkコンポーネントに渡して、NavLinkコンポーネントをカプセル化できます。
<!--使用路由组件的组件-->
<MyNavLink to="/home/message">Message</MyNavLink>
<!--NavLink 组件中对 NavLink 组件进行封装-->
<NavLink activeClassName="atguigu" className="list-group-item" {...this.props}/>
5.スイッチの使用
注：最初の適格なルーティングコンポーネントを見つけた後は、ルーティングコンポーネントの検索を続行しなくなります
{/* 注册路由 */}
<Switch>
<Route path="/about" component={About}/>
<Route path="/home" component={Home}/>
<Route path="/home" component={Test}/>
</Switch>
//地址栏访问 /about 或者 /home 时：
//注册路由只会渲染初 About 和 Home 路由组件 Test 路由组建不会呗查找到
//如果不加上 switch 标签就 Test 路由组件也会被渲染到页面上
6.間違ったスタイルのブートストラップ
解決
-
bootstraps.cssを導入するときは、。/ css / ... ====> / css / ..を置きます。
-
bootstraps.cssを導入するときは、。/ css / ... ====>％PUBLIC_URL％/ css / ..を入力します。
-
エントリファイルで、BrowserRouterタグを使用してルーティングコンポーネントを含むコンポーネントをラップしないでください====> HashRouterタグを使用してコンポーネントをラップしてください
7.正確なマッチングとあいまいマッチング
登録されたルートのパス= "/ home" ======> To = "/ home / a / b"は、レンダリング可能なコンポーネントに一致するルートの準備で指定されます
登録されたルートのパス= "/ home / a / b / c" ======>ルートの準備でto = "/ home"が指定されている場合、レンダリングできないコンポーネントと一致できません
登録したルート（表示バー）[一致したパス]を含む[入力パス]にルート（ナビゲーションバー）を書き込むと、順序を一致させることができます
ルートを登録するときは、exact = {true}を追加します。または、strictモードがexactに対して有効になっている場合、ルートは、一致するように登録されたときのルートと完全に同じである必要があります。
厳密なマッチングは、気軽にオンにすることはできず、必要に応じてオンになり、セカンダリルートとのマッチングが継続されない場合があります。