Was ist der Unterschied zwischen React-Front-End-Routing und Back-End-Routing?

Der Unterschied zwischen React-Front-End-Routing und Back-End-Routing: 1. Front-End-Routing wird durch das Link-Tag in „react-router“ ausgelöst, und Back-End-Routing wird durch Ajax ausgelöst Das Routing basiert auf der Browser-Ereignisüberwachung, während das Back-End-Routing auf dem HTTP-Kommunikationsprotokoll 3 basiert. Das Front-End-Routing kann ein teilweises Rendern erreichen, während das Back-End-Routing die gesamte Seite neu rendern kann.

Die Betriebsumgebung dieses Tutorials: Windows 10-System, Reaktionsversion 17.0.1, Dell G3-Computer.

Was ist der Unterschied zwischen Front-End-Routing und Back-End-Routing in React? Das Ende registriert die Back-End-Routing-Funktion in app.js und das Front-End übergibt Ajax, um die entsprechende Routing-Rückruffunktion auszulösen (nehmen Sie Express als Beispiel). ,Rückruf)

Prinzip: Basierend auf dem http-Kommunikationsprotokoll

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

Front-End-Routing-Mechanismus

Das Front-End-Routing (bezogen auf React-Router) besteht darin, dass das Front-End das Front-End-Routing und die Komponente registriert Zuordnung in router.js. Das Frontend verwendet die von Link festgelegte Route oder gibt die entsprechende Route in den Browser ein, um das Rendern der Komponente zu veranlassen:

Trigger: React-Router Link-Tag

Antwort: Rendern Sie die entsprechende Komponente im Rout-Tag

Prinzip: Basierend auf Hash im Browser (vor React-Router v2), Verlauf (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>

Die Header-Komponente wird immer in router.js vorhanden sein. Auf der Seite sind nur die Komponenten im Switch-Tag vorhanden Es kann einfach verstanden werden, dass die nicht ausgelöste Komponente null ist und nicht angezeigt wird. Daher bildet sie ein teilweises Rendering. Der Unterschied zwischen Front-End-Routing und Back-End-Routing -End-Routing basiert auf der Browser-Ereignisüberwachung und übergibt nicht das HTTP-Kommunikationsprotokoll

Das Front-End-Routing rendert teilweise und das Back-End rendert die gesamte Seite neu. Relativ gesehen ist das Front-End-Routing-Erlebnis besser

[Verwandte Empfehlungen:

Javascript-Video-Tutorial

,

Web-Frontend

】

Das obige ist der detaillierte Inhalt vonWas ist der Unterschied zwischen React-Front-End-Routing und Back-End-Routing?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!