반응 프론트엔드 라우팅과 백엔드 라우팅의 차이점은 무엇입니까?

리액트 프론트엔드 라우팅과 백엔드 라우팅의 차이점: 1. 프론트엔드 라우팅은 "react-router"의 Link 태그를 통해 트리거되고 백엔드 라우팅은 ajax를 통해 트리거됩니다. 라우팅은 브라우저 이벤트 모니터링을 기반으로 하고 백엔드 라우팅은 http 통신 프로토콜을 기반으로 합니다. 3. 프런트엔드 라우팅은 부분 렌더링을 달성할 수 있는 반면 백엔드 라우팅은 전체 페이지를 다시 렌더링할 수 있습니다.

이 튜토리얼의 운영 환경: Windows 10 시스템, 반응 버전 17.0.1, Dell G3 컴퓨터.

React에서 프론트엔드 라우팅과 백엔드 라우팅의 차이점은 무엇인가요?

백엔드 라우팅의 메커니즘

백엔드를 아는 학생들은 백엔드 라우팅이 백엔드 라우팅이라는 것을 알고 있습니다. end는 app.js에 백엔드 라우팅 기능을 등록하고, 프런트엔드 전달 ajax는 해당 라우팅 콜백 기능을 트리거합니다(Express를 예로 사용)

Trigger: ajax

Response: app.get('/router' ,콜백)

원리: http 통신 프로토콜 기반

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

프런트엔드 라우팅 메커니즘

프런트엔드 라우팅(react-router를 지칭함)은 프런트엔드가 프런트엔드 라우팅 및 구성 요소를 등록한다는 것입니다. front-end는 Link에 의해 설정된 경로를 사용하거나 브라우저에 해당 경로를 입력하여 구성 요소 렌더링을 발생시킵니다.

Trigger: React-router Link tag

Response: Rout 태그에서 해당 구성 요소를 렌더링합니다.

원리: 브라우저의 해시(React-Router v2 이전), 기록(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>

헤더 구성 요소는 항상 router.js에 존재합니다. 페이지에서 Switch 태그의 구성 요소는 트리거되지 않은 컴포넌트는 null이고 표시되지 않는다는 점을 간단히 이해하면

부분 렌더링을 형성합니다

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

프론트엔드 라우팅과 백엔드 라우팅의 차이점

프론트 -엔드 라우팅은 브라우저 이벤트 모니터링을 기반으로 하며 http 통신 프로토콜을 통과하지 않습니다.

프런트 엔드 라우팅은 부분적으로 렌더링되고 백엔드는 전체 페이지를 다시 렌더링합니다. 상대적으로 프런트 엔드 라우팅 경험이 더 좋습니다.

[관련 추천: javascript 비디오 튜토리얼, 웹 프론트엔드 ]

위 내용은 반응 프론트엔드 라우팅과 백엔드 라우팅의 차이점은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!