React 라우팅에는 여러 가지 모드가 있습니다.

React 라우팅에는 두 가지 모드가 있습니다. 1. 경로 앞에 "#" 기호를 추가하여 해시 값이 되는 해시 모드 2. 브라우저의 이전 탭 또는에서 액세스한 세션 기록을 작동할 수 있는 기록 모드. 프레임.

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

React Routing

1.

이란 무엇입니까? 단일 페이지 애플리케이션에서 웹 프로젝트에는 html 페이지가 하나만 있습니다. 페이지가 로드되면 페이지를 다시 로드하거나 이동할 필요가 없습니다. 전송, 그 특징은 다음과 같습니다:

브라우저가 서버에 요청을 보내지 않고 URL을 변경합니다.

페이지를 새로 고치지 않고 브라우저 주소 표시줄의 URL 주소를 동적으로 변경합니다.

주로 두 가지로 나뉩니다. 모드:

• 해시 모드: URL 뒤에 #을 추가합니다. 예: http://127.0.0.1:5500/home/#/page1

• history 모드: 브라우저의 세션을 작동하도록 허용합니다. 탭 페이지 또는 프레임 History

2.

사용 React Router의 해시 모드 및 히스토리 모드에 해당하는 구성 요소는 다음과 같습니다.

HashRouter

BrowserRouter

이 두 구성 요소의 사용 아래와 같이 최상위 구성 요소가 다른 구성 요소를 래핑하므로 매우 간단합니다.

// 1.import { BrowserRouter as Router } from "react-router-dom";
// 2.import { HashRouter as Router } from "react-router-dom";
 
import React from 'react';
import {
  BrowserRouter as Router,
  // HashRouter as Router  
  Switch,
  Route,
} from "react-router-dom";
import Home from './pages/Home';
import Login from './pages/Login';
import Backend from './pages/Backend';
import Admin from './pages/Admin';
 
 
function App() {
  return (
    <Router>
        <Route path="/login" component={Login}/>
        <Route path="/backend" component={Backend}/>
        <Route path="/admin" component={Admin}/>
        <Route path="/" component={Home}/>
    </Router>
  );
}
 
export default App;

3. 구현 원칙

라우팅은 URL과 UI 간의 매핑 관계를 설명합니다. 즉, URL 변경으로 인해 UI 업데이트가 발생합니다(페이지를 새로 고칠 필요 없음)

다음은 해시 모드를 예로 사용합니다. 브라우저가 요청을 보내지 않으면 해시 값을 변경해도 브라우저가 서버에 요청을 보내지 않습니다. 요청하면 페이지가 새로 고쳐지지 않습니다.

해시 값 변경은 전역 창 개체를 트리거합니다. 따라서 해시 모드 라우팅은 hashchange 이벤트를 사용하여 URL의 변경 사항을 모니터링하고 DOM 작업을 수행하여 페이지 점프를 시뮬레이션합니다

react-router도 이 기능을 기반으로 경로 점프를 구현합니다

다음은 HashRouter 구성 요소 분석을 확장합니다. :

HashRouter

HashRouter는 전체 애플리케이션을 래핑하고,

window.addEventListener('hashChange', callback)을 통해 해시 값의 변경 사항을 모니터링하고 이를 중첩된 구성 요소에 전달합니다.

그런 다음 위치 데이터를

import React, { Component } from 'react';
import { Provider } from './context'
// 该组件下Api提供给子组件使用
class HashRouter extends Component {
  constructor() {
    super()
    this.state = {
      location: {
        pathname: window.location.hash.slice(1) || '/'
      }
    }
  }
  // url路径变化 改变location
  componentDidMount() {
    window.location.hash = window.location.hash || '/'
    window.addEventListener('hashchange', () => {
      this.setState({
        location: {
          ...this.state.location,
          pathname: window.location.hash.slice(1) || '/'
        }
      }, () => console.log(this.state.location))
    })
  }
  render() {
    let value = {
      location: this.state.location
    }
    return (
      <Provider value={value}>
        {
          this.props.children
        }
      </Provider>
    );
  }
}
 
export default HashRouter;

Router

Router 구성 요소가 하는 주요 작업은 BrowserRouter를 통해 전달된 현재 값, props를 통해 전달된 경로 및 컨텍스트에서 전달된 경로 이름을 일치시키는 것입니다. 렌더링 구성요소 실행 여부 결정

import React, { Component } from 'react';
import { Consumer } from './context'
const { pathToRegexp } = require("path-to-regexp");
class Route extends Component {
  render() {
    return (
      <Consumer>
        {
          state => {
            console.log(state)
            let {path, component: Component} = this.props
            let pathname = state.location.pathname
            let reg = pathToRegexp(path, [], {end: false})
            // 判断当前path是否包含pathname
            if(pathname.match(reg)) {
              return <Component></Component>
            }
            return null
          }
        }
      </Consumer>
    );
  }
}
export default Route;

추천 학습: "react 비디오 튜토리얼"

위 내용은 React 라우팅에는 여러 가지 모드가 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!