React フロントエンド ルーティングとバックエンド ルーティングの違い: 1. フロントエンド ルーティングは「react-router」の Link タグを通じてトリガーされ、バックエンド ルーティングは ajax を通じてトリガーされます。ブラウザのイベント監視に基づき、バックエンド ルーティングは http 通信プロトコルに基づきます。 3. フロントエンド ルーティングは部分的なレンダリングを実現でき、バックエンド ルーティングはページ全体を再レンダリングできます。
このチュートリアルの動作環境: Windows 10 システム、React バージョン 17.0.1、Dell G3 コンピューター。
バックエンドルーティングメカニズム
バックエンドについて知っている生徒は、バックエンド ルーティングとは、バックエンドが app.js にバックエンド ルーティング関数を登録し、フロントエンドが ajax を通じて対応するルーティング コールバック関数をトリガーすることを意味していることを知っています (例として Express を使用します)。
トリガー: ajax
応答: app.get('/router',callback)
原理：http通信プロトコルに基づく
//app.jsapp.get('/', (リクエスト, レスポンス) => { let ret = { "success": true, "code": 200, "message": "", "data": [], } 応答.send(ret)})フロントエンドルーティングメカニズム
フロントエンドルーティング(react-routerを参照)は、フロントエンドがrouter.jsにフロントエンドルーティングとコンポーネントマッピングを登録し、フロントエンドはLinkで設定したルート、または、ブラウザ内の対応するルート:
トリガー：react-router のリンクタグ
応答: Rout タグ内の対応するコンポーネントをレンダリングします。
原則: ブラウザーのハッシュ (React-Router v2 より前)、履歴 (React-Router v4) に基づく
//index.jsclass ListContent extends Component {constructor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> </Link> </Button> </Row> ); }}//router.js<Router> <div> <Header/> <Switch> <ルートの正確なパス="/" コンポーネント={index} /> <ルートの正確なパス = "/トピック" コンポーネント = {トピック} /> </Switch> </div></Router>router.js では、ヘッダー コンポーネントは常にページ内に存在しますが、Switch タグ内のコンポーネントはトリガーされた後にのみレンダリングされます。トリガーされていないコンポーネントは null であり、表示されないことが簡単に理解できます。
したがって、ローカルレンダリングが形成されます
// フロントエンド ルーティング '/topic' がトリガーされた場合、インデックス コンポーネントは <Router> <div> <Header/> <Switch> <Route strict path="/"Component={null} /> < をレンダリングしません。ルートの正確なパス = " /トピック" コンポーネント = {トピック} /> </Switch> </div></Router>フロントエンドルーティングとバックエンドルーティングの違い
フロントエンド ルーティングはブラウザ イベントの監視に基づいており、http 通信プロトコルを通過しません。
フロントエンド ルーティングは部分的にレンダリングし、バックエンドはページ全体を再レンダリングします。比較的、フロントエンド ルーティングのエクスペリエンスが向上します。