react-router-domのBrowserRouterとHashRouterとlinkとNavlink
9799 ワード
HashRouterパッケージのアクセスルートサービス:
操作一:ブラウザが
操作2:ブラウザが
HashRouterをBrowserRouterに変更
操作一:ブラウザは直接
操作2:ブラウザは
問題を投げ出します:どうして
フロントエンドが
したがって、
しかし、公式には
linkとNavlink
これで、各ページ間を切り替える必要があります.アンカー要素を使用して実装すると、クリックするたびにページが再ロードされ、React Routerはこのような状況を回避するためのコンポーネントを提供します.クリックするとurlが更新され、コンポーネントは再レンダリングされますが、ページは再ロードされません.
例
toパラメータを使用して、位置決めが必要なページを記述します.値は文字列でもlocationオブジェクト(pathname、search、hash、stateプロパティを含む)でも構いません.値が文字列の場合、locationオブジェクトに変換されます.
replace(bool):trueの場合、リンクをクリックするとアクセス履歴の元のアドレスが新しいアドレスに置き換えられます.falseの場合、リンクをクリックすると、既存のアクセス履歴に新しいレコードが追加されます.デフォルトはfalseです.
リンクをクリックすると、ルーティングシステムで何が起こりましたか?
Linkコンポーネントは最終的にHTMLタグを選択すると、to、query、hashプロパティが結合され、hrefプロパティとしてレンダリングされます。Linkはハイパーリンクとしてレンダリングされますが、内部インプリメンテーションではスクリプトを使用してブラウザのデフォルトの動作をブロックしhistoryを呼び出します。PushStateメソッド(注:historyパッケージ内のcreate*Historyメソッドで作成されたオブジェクトを指し、window.historyはブラウザのオリジナルのhistoryオブジェクトを指定します。APIが同じなので混同しないでください)。historyパッケージの最下位レベルのpushStateメソッドは、2つのパラメータstateとpathの転送をサポートし、関数内でこの2つのパラメータをcreateLocationメソッドに転送し、locationを返す構造は次のとおりです。としてレンダリングされます
システムは上記locationオブジェクトをパラメータとしてTransitionToメソッドに入力windowを呼び出す.location.窓かhistory.PushState()は、historyオブジェクトを作成する方法に応じて、アプリケーションのURLを変更します.同時にhistoryがトリガーされます.Listenに登録されているイベントリスナー.NavLinkは、現在のurlに一致するときにレンダリングされた要素にパラメータを追加する特定のバージョンです.コンポーネントのプロパティには
ActiveClassName(string):選択スタイルを設定します.デフォルト値はactiveactiveStyle(object):要素が選択されている場合、この要素にスタイルexact(bool):trueを追加すると、classとstyleが完全に一致する場合にのみstrict(bool):trueが適用されます.現在のURLに位置が一致するかどうかを決定すると、位置pathnameを考慮した斜線isActive(func)がリンクがアクティブかどうかを判断する追加論理の機能うん、例を見ればわかる
転載先https://blog.csdn.net/lhjuejiang/article/details/80366839
転載先:https://www.cnblogs.com/Shinigami/p/11574708.html
localhost:3000/と仮定import { HashRouter as Router, Route, Redirect } from 'react-router-dom';
// as HashRouter Router, HashRouter BrowserRouter ,
import Home from './pages/Home/index';
import Hooks from './pages/Hooks/index';
export default function App() {
return (
"/">
"/home" />
"/home" component={Home} />
"/hooks" component={Hooks} />
)
}操作一:ブラウザが
localhost:3000/を直接入力結果:ルーティングは自動的にlocalhost:3000/#/homeになり、正常にアクセスできる.操作2:ブラウザが
localhost:3000/#/hooksを直接入力した結果:正常にアクセスできるHashRouterをBrowserRouterに変更
import { BrowserRouter as Router, Route, Redirect } from 'react-router-dom'; // BrowserRouter操作一:ブラウザは直接
localhost:3000/の結果を入力する:ルートは自動的にlocalhost:3000/homeになって、正常にアクセスすることができる操作2:ブラウザは
localhost:3000/hooksの結果を直接入力します:ブラウザは正しい結果を得ることができなくて、Cannot GET /hooks操作2:ブラウザはlocalhost:3000/homeの結果を直接入力します:ブラウザは正しい結果を得ることができなくて、Cannot GET /home操作の3:ブラウザは直接localhost:3000/を入力して成功した後に、内容のHomeの結果をクリックします:成功にジャンプすることができます問題を投げ出します:どうして
hashRouterは直接経路にアクセスすることができて、browserRouterはルートが見つからない情況が現れますか?なぜhashRouterがフロントエンドでジャンプして成功したのですか?サーバルーティング:browserRouter、フロントエンドルーティング:hashRouter
browserRouter
フロントエンドが
browserRouterを使用すると、ルーティングを変更するたびに、サーバが対応するパスが対応するファイルを指すように構成されていないため、当然404が発生する.(初期化ページ、すなわちルーティングが/の場合、リクエストは送信されません)したがって、
browserHistoryを使用するには、フロントエンドから送信要求が対応するhtmlファイルにマッピングされるように、サーバ構成(node/nginx)をさらに1層追加する必要がある.hashRouter
hashRouterは経路に/#/を追加するため、/#/の後のすべてはサーバ側に送信されない.すなわち、サーバにとって経路は依然としてlocalhost:3000であり、経路切替はフロントエンドで完了する.しかし、公式には
browserRouterの使用が推奨されています.H 5のHistory APIに構築されているようです.hashRouterよりもurlを操作する方法が増えています.詳しくは「react-router-dom」を参照してください.linkとNavlink
Link
これで、各ページ間を切り替える必要があります.アンカー要素を使用して実装すると、クリックするたびにページが再ロードされ、React Routerはこのような状況を回避するためのコンポーネントを提供します.クリックするとurlが更新され、コンポーネントは再レンダリングされますが、ページは再ロードされません.
Linkはフロントエンド内部に属するジャンプであるため、ジャンプ時にサーバに要求を送信することもない.例
"/about">
// to obj
{{
pathname: '/courses',
search: '?sort=name',
hash: '#the-hash',
state: { fromDashboard: true }
}}/>
// replace
"/courses" replace />toパラメータを使用して、位置決めが必要なページを記述します.値は文字列でもlocationオブジェクト(pathname、search、hash、stateプロパティを含む)でも構いません.値が文字列の場合、locationオブジェクトに変換されます.
replace(bool):trueの場合、リンクをクリックするとアクセス履歴の元のアドレスが新しいアドレスに置き換えられます.falseの場合、リンクをクリックすると、既存のアクセス履歴に新しいレコードが追加されます.デフォルトはfalseです.
リンクをクリックすると、ルーティングシステムで何が起こりましたか?
Linkコンポーネントは最終的にHTMLタグを選択すると、to、query、hashプロパティが結合され、hrefプロパティとしてレンダリングされます。Linkはハイパーリンクとしてレンダリングされますが、内部インプリメンテーションではスクリプトを使用してブラウザのデフォルトの動作をブロックしhistoryを呼び出します。PushStateメソッド(注:historyパッケージ内のcreate*Historyメソッドで作成されたオブジェクトを指し、window.historyはブラウザのオリジナルのhistoryオブジェクトを指定します。APIが同じなので混同しないでください)。historyパッケージの最下位レベルのpushStateメソッドは、2つのパラメータstateとpathの転送をサポートし、関数内でこの2つのパラメータをcreateLocationメソッドに転送し、locationを返す構造は次のとおりです。としてレンダリングされます
location = {
pathname, // ， Link to
search, // search
hash, // hash
state, // state
action, // location ， Link PUSH， POP， replaceState REPLACE
key, // sessionStorage state
};システムは上記locationオブジェクトをパラメータとしてTransitionToメソッドに入力windowを呼び出す.location.窓かhistory.PushState()は、historyオブジェクトを作成する方法に応じて、アプリケーションのURLを変更します.同時にhistoryがトリガーされます.Listenに登録されているイベントリスナー.NavLinkは、現在のurlに一致するときにレンダリングされた要素にパラメータを追加する特定のバージョンです.コンポーネントのプロパティには
ActiveClassName(string):選択スタイルを設定します.デフォルト値はactiveactiveStyle(object):要素が選択されている場合、この要素にスタイルexact(bool):trueを追加すると、classとstyleが完全に一致する場合にのみstrict(bool):trueが適用されます.現在のURLに位置が一致するかどうかを決定すると、位置pathnameを考慮した斜線isActive(func)がリンクがアクティブかどうかを判断する追加論理の機能うん、例を見ればわかる
// activeClassName selected
<NavLink
to="/faq"
activeClassName="selected"
>FAQs
// activeStyle
<NavLink
to="/faq"
activeStyle={{
fontWeight: 'bold',
color: 'red'
}}
>FAQs
// event id ，
const oddEvent = (match, location) => {
if (!match) {
return false
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
}
<NavLink
to="/events/123"
isActive={oddEvent}
>Event 123転載先https://blog.csdn.net/lhjuejiang/article/details/80366839
転載先:https://www.cnblogs.com/Shinigami/p/11574708.html