Quelle est la différence entre le routage front-end et le routage back-end ?

La différence entre le routage front-end réactif et le routage back-end : 1. Le routage front-end est déclenché via la balise Link dans "react-router", et le routage back-end est déclenché via ajax 2. Front-end ; le routage est basé sur la surveillance des événements du navigateur, tandis que le routage back-end est basé sur le protocole de communication http ; 3. Le routage frontal peut obtenir un rendu partiel, tandis que le routage back-end peut restituer la page entière.

L'environnement d'exploitation de ce tutoriel : système Windows 10, React version 17.0.1, ordinateur Dell G3.

Quelle est la différence entre le routage front-end et le routage back-end dans React ?

Le mécanisme du routage back-end

Les étudiants qui connaissent le back-end savent que le routage back-end est lorsque le back-end est utilisé. end enregistre la fonction de routage back-end dans app.js, et le front-end passe ajax déclenche la fonction de rappel de routage correspondante (prenons express comme exemple)

Déclencheur : ajax

Réponse : app.get('/router' ,callback)

Principe : basé sur le protocole de communication http

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

Mécanisme de routage frontal

Le routage frontal (en référence à React-Router) est que le frontal enregistre le routage frontal et le composant mappage dans router.js Le front-end utilise la route définie par Link ou saisit la route correspondante dans le navigateur pour provoquer le rendu du composant :

Déclencheur : balise de lien de réaction-router

Réponse : affichez le composant correspondant dans la balise Rout.

Principe : Basé sur le hachage dans le navigateur (avant React-Router v2), l'historique (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>

Le composant d'en-tête existera toujours dans router.js Dans la page, les composants de la balise Switch n'existeront que être rendu après avoir été déclenché. On peut simplement comprendre que le composant non déclenché est nul et n'est pas affiché

, il forme donc un rendu partiel

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

La différence entre le routage front-end et le routage back-end

Front. Le routage front-end est basé sur la surveillance des événements du navigateur et ne passe pas le protocole de communication http

Le routage front-end est rendu partiellement et le back-end restitue la page entière. Relativement parlant, l'expérience de routage front-end est meilleure.

[Recommandations associées : tutoriel vidéo javascript, front-end web 】

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!