react-routerでのbrowserRouterとhashRouterの違い
Difference Between Browserrouter
結論から始めましょう:
2つの最大の違いは、hashRouterがlocation.keyとlocation.stateをサポートしていないことです。
例えば:
ホームページ
this.props.history.push({ pathname:'/about', state:{ msg:'this is a msg from home' } })
アバウトページ
console.log(JSON.stringify(this.props.location.state))
ハッシュルーティングを使用する:
// aboutpageを初めてロードする
//{msg: 'this is a msg from home'}
//ページを更新した後
//undefined
ブラウザルーティングを使用する:
// aboutpageを初めてロードする
//{msg: 'this is a msg from home'}
//ページを更新した後
//{msg: 'this is a msg from home'}
原理:
パラメータを状態に渡すと、hashRouterはhtml5の履歴APIを使用しないため、履歴からキーと状態の値を取得できず、ルートが更新されると状態の値が失われます。ページが異常に表示される原因になります。 。