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を使用しないため、履歴からキーと状態の値を取得できず、ルートが更新されると状態の値が失われます。ページが異常に表示される原因になります。 。