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 , and the back-end routing is based on the http communication protocol; 3. The front-end routing can achieve partial rendering, while the back-end routing can re-render the entire page.

The operating environment of this tutorial: Windows 10 system, react17.0.1 version, Dell G3 computer.

What is the difference between front-end routing and back-end routing in react

The mechanism of back-end routing

Students who understand the back-end all know that back-end routing 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.js
app.get('/', (request, response) => {
  let ret = {
  "success": true,
  "code": 200,
  "message": "",
  "data": [],
  }
  
  response.send(ret)
})

Front-end routing mechanism

And front-end routing (referring to react-router ) Yes, the front-end registers the front-end routing and component mapping in router.js. The front-end uses the route set by Link or enters the corresponding route in the browser to cause component rendering:

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.js
class ListContent extends Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }
  
  render() {
    return (
      <Row>
          <Button>
+            <Link to="/topic"> 發(fā)布話題 </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 the untriggered component is null and will not be displayed

, so it forms a partial rendering

//若觸發(fā)前端路由'/topic',則index組件不渲染
<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

Front-end routing is partially rendered and the back-end is re-rendered For the entire page, the front-end routing experience is relatively better

[Related recommendations: javascript video tutorial, web front-end]

The above is the detailed content of What is the difference between react front-end routing and back-end routing?. For more information, please follow other related articles on the PHP Chinese website!