The difference between react front-end routing and back-end routing: 1. Front-end routing is triggered through the Link tag in "react-router", and back-end routing is triggered through ajax; 2. Front-end routing is based on browser event monitoring, while back-end routing is based on http Communication protocol; 3. Front-end routing can achieve partial rendering, while back-end routing can re-render the entire page.
The operating environment of this tutorial: Windows 10 system, react version 17.0.1, Dell G3 computer.
Backend routing mechanism
Students who know the backend know that backend routing means that the backend registers the backend routing function in app.js, and the frontend triggers the corresponding routing callback function through ajax (take express as an example)
Trigger: ajax
Response: app.get('/router',callback)
Principle: Based on http communication protocol
//app.jsapp.get('/', (request, response) => { let ret = { "success": true, "code": 200, "message": "", "data": [], } response.send(ret)})Front-end routing mechanism
As for front-end routing (referring to react-router), the front-end registers the front-end routing and component mapping in router.js, and the front-end causes component rendering through the route set by Link or by inputting the corresponding route in the browser:
Trigger: Link tag in react-router
Response: Render the corresponding component in the Rout tag
Principle: Based on hash in the browser (before React-Router v2), history (React-Router v4)
//index.jsclass ListContent extends Component { constructor(props){ super(props); this.state = { } } render() { return ( <Row> <Button>+ <Link to="/topic"> Post topic </Link> </Button> </Row> ); }}//router.js<Router> <div> <Header/> <Switch> <Route exact path="/" component={index} /> < Route exact path="/topic" component={topic} /> </Switch> </div></Router>In router.js, the header component will always exist in the page, while the components in the Switch tag will only be rendered after being triggered. It can be simply understood that untriggered components are null and will not be displayed.
Therefore, local rendering is formed
//If the front-end routing '/topic' is triggered, the index component will not render <Router> <div> <Header/> <Switch> <Route exact path="/" component={null} /> <Route exact path=" /topic" component={topic} /> </Switch> </div></Router>The difference between front-end routing and back-end routing
Front-end routing is based on browser event monitoring and does not pass the http communication protocol
The front-end routing partially renders, and the back-end re-renders the entire page. Relatively speaking, the front-end routing experience is better.