La différence entre le routage frontal de réaction et le routage back-end : 1. Le routage frontal est déclenché via la balise Link dans "react-router", et le routage back-end est déclenché via ajax 2. Le routage frontal 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, version React 17.0.1, ordinateur Dell G3.
Mécanisme de routage back-end
Les étudiants qui connaissent le backend savent que le routage backend signifie que le backend enregistre la fonction de routage backend dans app.js et que le frontend déclenche la fonction de rappel de routage correspondante via ajax (prenons express comme exemple)
Déclencheur : ajax
Réponse : app.get('/router',callback)
Principe : Basé sur le protocole de communication http
//app.jsapp.get('/', (requête, réponse) => { let ret = { "success": true, "code": 200, "message": "", "data": [], } réponse.envoyer(ret)})Mécanisme de routage frontal
En ce qui concerne le routage frontal (en référence à React-Router), le frontal enregistre le routage frontal et le mappage des composants dans router.js, et le front-end provoque le rendu des composants via l'itinéraire défini par Link ou en saisissant le itinéraire correspondant dans le navigateur :
Déclencheur : balise de lien dans React-Router
Réponse : affichez le composant correspondant dans la balise Rout.
Principe : Basé sur le hash dans le navigateur (avant React-Router v2), historique (React-Router v4)
//index.jsclass ListContent extends Component { constructor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> Publier le sujet </Link> </Button> </Row> ); }}//router.js<Router> <div> <Header/> <Switch> <Route exact path="/" composant={index} /> < Route exact path="/topic" composant={topic} /> </Switch> </div></Router>Dans router.js, le composant d'en-tête existera toujours dans la page, tandis que les composants de la balise Switch ne seront rendus qu'après avoir été déclenchés. On peut simplement comprendre que les composants non déclenchés sont nuls et ne seront pas affichés.
Par conséquent, un rendu local est formé
//Si le routage frontal '/topic' est déclenché, le composant d'index ne restituera pas <Router> <div> <Header/> <Switch> <Route exact path="/" composant={null} /> < Route exact path=" /topic" composant={topic} /> </Switch> </div></Router>La différence entre le routage front-end et le routage back-end
Le routage frontal est basé sur la surveillance des événements du navigateur et ne transmet pas le protocole de communication http
Le routage front-end restitue partiellement et le back-end restitue la page entière. Relativement parlant, l'expérience de routage front-end est meilleure.