反応フロントエンドルーティングとバックエンドルーティングの違いは何ですか?

反応フロントエンド ルーティングとバックエンド ルーティングの違い: 1. フロントエンド ルーティングは「react-router」の Link タグを通じてトリガーされ、バックエンド ルーティングは ajax を通じてトリガーされます。2フロントエンド ルーティングはブラウザ イベントの監視に基づいており、バックエンド ルーティングは http 通信プロトコルに基づいています; 3. フロントエンド ルーティングは部分的なレンダリングを実現でき、バックエンド ルーティングは全体を再レンダリングできます。ページ。

このチュートリアルの動作環境: Windows 10 システム、react17.0.1 バージョン、Dell G3 コンピューター。

react におけるフロントエンド ルーティングとバックエンド ルーティングの違いは何ですか

バックエンド ルーティングの仕組み

理解している生徒バックエンドはすべて、バックエンド ルーティングを知っています。バックエンドはバックエンド ルーティング関数を app.js に登録し、フロントエンドは ajax を通じて対応するルーティング コールバック関数をトリガーします (例として Express を使用します)

トリガー: ajax

応答: app.get( '/router',callback)

原則: http 通信プロトコルに基づく

//app.js
app.get('/', (request, response) => {
  let ret = {
  "success": true,
  "code": 200,
  "message": "",
  "data": [],
  }

  response.send(ret)
})

フロントエンド ルーティング メカニズム

そして、フロントエンド ルーティング (react-router を参照) はい、フロントエンドは、フロントエンド ルーティングとコンポーネント マッピングを router.js に登録します。フロントエンドは、Link で設定されたルートを使用するか、次のように入力します。コンポーネントのレンダリングを引き起こすブラウザ内の対応するルート:

トリガー: 反応ルータのリンク タグ

応答: Rout タグの対応するコンポーネントのレンダリング

原則: ベースブラウザーのハッシュ (React-Router v2 より前)、履歴 (React-Router v4)

//index.js
class 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>
            <Route exact path="/" component={index} />
            <Route exact path="/topic" component={topic} />
          </Switch>
    </div>
</Router>

router.js では、ヘッダー コンポーネントは常にページ内に存在しますが、Switch タグ内のコンポーネントはのみ存在します。単純に理解できるのは、トリガーされていないコンポーネントは null であり、表示されない

ため、部分的なレンダリングが形成されます

//若触发前端路由'/topic',则index组件不渲染
<Router>
    <div>
      <Header/>
          <Switch>
            <Route exact path="/" component={null} />
            <Route exact path="/topic" component={topic} />
          </Switch>
    </div>
</Router>

front-エンド ルーティングとバックエンド ルーティング

フロントエンド ルーティングはブラウザ イベントの監視に基づいており、http 通信プロトコルを通過しません

フロントエンド ルーティングは部分的にレンダリングされ、バックエンド ルーティングはバックエンド ルーティングです。 -end は再レンダリングされます。ページ全体で、フロントエンドのルーティング エクスペリエンスが比較的優れています。

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上が反応フロントエンドルーティングとバックエンドルーティングの違いは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。