이 글은 라우팅에서부터 시작되는 React-Router 4.0 소스 코드에 대한 심층적인 이해를 제공하며, 필요한 참고 자료가 될 수 있기를 바랍니다.
react-router와 같은 프런트엔드 라우팅은 거의 동일한 원리를 가지며 새로 고침 없이 다른 페이지를 표시하도록 전환할 수 있습니다. 라우팅의 본질은 페이지의 URL이 변경되면 URL 변경에 따라 페이지의 표시 결과가 변경될 수 있지만 페이지가 새로 고쳐지지는 않는다는 것입니다. 단일 페이지(SPA) 애플리케이션은 프런트 엔드 라우팅을 통해 구현할 수 있습니다. 이 기사에서는 먼저 프런트 엔드 라우팅의 원리에서 시작하여 프런트 엔드 라우팅 원리의 변경 사항을 자세히 소개합니다. 그런 다음, React-Router4.0의 소스 코드부터 시작하여 React-Router4.0이 프런트 엔드 라우팅을 구현하는 방법을 깊이 이해하게 됩니다.
Hash를 통한 프런트엔드 라우팅
H5 기록을 통한 프런트엔드 라우팅
React-router4.0 사용
React-router4.0 소스 코드 분석
초기 프런트엔드 라우팅은 해시를 통해 구현되었습니다.
URL의 해시 값을 변경하면 페이지가 새로 고쳐지지 않습니다.
따라서 해시를 통해 프런트 엔드 라우팅을 구현하여 새로 고침 없는 효과를 얻을 수 있습니다. 해시 속성은 위치 개체에 있습니다. 현재 페이지에서
window.location.hash='edit'
를 통해 현재 URL의 해시 값을 변경할 수 있습니다. 위의 해시 할당을 실행한 후 페이지의 URL이 변경됩니다.
할당 전: http://localhost:3000
할당 후: http://localhost:3000/#edit
URL에 #으로 끝나는 추가 해시 값이 있지만 페이지의 해시 값이 변경되지만 할당 전후 결과 페이지의 전체 URL이 변경되었지만 페이지가 새로 고쳐지지 않습니다. 또한 해시 변경 사항을 모니터링할 수 있는 hashchange라는 이벤트가 있습니다. 다음 두 가지 방법으로 해시 변경 사항을 모니터링할 수 있습니다.
window.onhashchange=function(event){
console.log(event);
}
window.addEventListener('hashchange',function(event){
console.log(event);
})해시 값이 변경되면 HashChangeEvent가 출력됩니다. HashChangeEvent의 구체적인 값은 다음과 같습니다.
{isTrusted: true, oldURL: "http://localhost:3000/", newURL: "http://localhost:3000/#teg", type: "hashchange".....}청취 이벤트를 사용하면 변경된 해시 페이지가 새로 고쳐지지 않으며 청취 이벤트의 콜백 함수에서 다양한 UI 디스플레이를 표시하고 숨기는 기능을 수행하여 전면- 라우팅을 종료합니다.
또한, window.location.hash를 통해 현재 페이지의 해시 값을 변경하는 것 외에도 html의 a 태그를 통해서도 달성할 수 있습니다:
<a href="#edit">edit</a>
hash의 단점은 호환성이 더 좋습니다. so in 초기 프론트 엔드 라우팅에서 널리 사용되었지만 해시를 사용하는 데에도 단점이 많습니다.
검색 엔진은 해시가 있는 페이지에 적합하지 않습니다
해시가 있는 페이지에서는 사용자 행동을 추적하기 어렵습니다
HTML5의 히스토리 인터페이스인 히스토리 객체. 기본 인터페이스는 다른 인터페이스에서 상속되지 않습니다. History 인터페이스를 사용하면 브라우저 세션 기록을 조작할 수 있습니다.
History는 몇 가지 속성과 메서드를 제공합니다.
History 속성:
History.length: 현재 세션 페이지를 포함하여 세션 기록에 있는 레코드 수를 반환합니다. 또한 새 탭이 열리면 길이 값은 1
History.state:
은 popState 이벤트를 트리거하는 메서드와 전달된 속성 개체(pushState 및
History 메소드:
History.back(): 브라우저 세션 기록에서 이전 페이지로 돌아갑니다. 이는 브라우저의 뒤로 버튼
History와 동일한 기능을 가지고 있습니다. 앞으로(): 브라우저 세션 기록의 다음 페이지를 가리킵니다. 브라우저의 앞으로 버튼과 동일합니다.
History.go(): 브라우저 세션 기록에서 지정된 기록 페이지로 이동할 수 있습니다.
History . pushState(): pushState는 주어진 데이터를 브라우저 세션 기록 스택으로 푸시할 수 있습니다. 이 메소드는 3개의 매개변수, 객체, 제목 및 URL 문자열을 받습니다. pushState 후에는 현재 페이지 URL이 변경되지만 새로 고침이 수반되지 않습니다.
History.replaceState(): replacementState는 현재 세션 페이지의 URL을 지정된 데이터로 바꿉니다. 현재 페이지의 URL이 변경되지만 페이지가 새로 고쳐지지 않습니다.
위 방법에서 pushState와 repalce:
의 동일한 점은 둘 다 현재 페이지에 표시된 URL을 변경하지만 페이지를 새로 고치지는 않는다는 것입니다.
차이:
pushState는 브라우저의 세션 기록 스택에 푸시되어 History.length를 1씩 늘리는 반면, replacementState는 현재 세션 기록을 대체하므로 History.length는 증가하지 않습니다.
history는 브라우저의 BOM 객체 모델에서 중요한 속성입니다. History는 History 인터페이스를 완전히 상속하므로 History의 모든 속성과 메서드를 갖습니다.
여기에서는 주로history.length 속성과history.pushState및history.replaceState메서드를 살펴봅니다.
history.pushState(stateObj,title,url) 또는 History.replaceState(stateObj,title,url)
pushState 및 replacementState는 각각 상태 개체, 제목 제목 및 변경된 URL인 3개의 매개 변수를 허용합니다.
window.history.pushState({foo:'bar'}, "page 2", "bar.html");
此时，当前的url变为：
执行上述方法前：http://localhost:3000
执行上述方法后：http://localhost:3000/bar.html
如果我们输出window.history.state:
console.log(window.history.state);
// {foo:'bar'}
window.history.state就是我们pushState的第一个对象参数。
history.replaceState()方法不会改变hitroy的长度
console.log(window.history.length);
window.history.replaceState({foo:'bar'}, "page 2", "bar.html");
console.log(window.history.length);
上述前后两次输出的window.history.length是相等的。
此外。
每次触发history.back()或者浏览器的后退按钮等，会触发一个popstate事件，这个事件在后退或者前进的时候发生：
window.onpopstate=function(event){
}注意：
history.pushState和history.replaceState方法并不会触发popstate事件。
如果用history做为路由的基础，那么需要用到的是history.pushState和history.replaceState,在不刷新的情况下可以改变url的地址，且如果页面发生回退back或者forward时，会触发popstate事件。
hisory为依据来实现路由的优点：
对搜索引擎友好
方便统计用户行为
缺点：
兼容性不如hash
需要后端做相应的配置，否则直接访问子页面会出现404错误
了解了前端路由实现的原理之后，下面来介绍一下React-router4.0。在React-router4.0的代码库中，根据使用场景包含了以下几个独立的包：
react-router : react-router4.0的核心代码
react-router-dom : 构建网页应用，存在DOM对象场景下的核心包
react-router-native : 适用于构建react-native应用
react-router-config : 配置静态路由
react-router-redux : 结合redux来配置路由，已废弃，不推荐使用。
在react-router4.0中，遵循Just Component的设计理念：
所提供的API都是以组件的形式给出。
比如BrowserRouter、Router、Link、Switch等API都是以组件的形式来使用。
下面我们以React-router4.0中的React-router-dom包来介绍常用的BrowserRouter、HashRouter、Link和Router等。
用
basename: string 这个属性，是为当前的url再增加名为basename的值的子目录。
<BrowserRouter basename="test"/>
如果设置了basename属性，那么此时的：
http://localhost:3000 和 http://localhost:3000/test 表示的是同一个地址，渲染的内容相同。
getUserConfirmation: func 这个属性，用于确认导航的功能。默认使用window.confirm
forceRefresh: bool 默认为false，表示改变路由的时候页面不会重新刷新，如果当前浏览器不支持history，那么当forceRefresh设置为true的时候，此时每次去改变url都会重新刷新整个页面。
keyLength: number 表示location的key属性的长度，在react-router中每个url下都有为一个location与其对应，并且每一个url的location的key值都不相同，这个属性一般都使用默认值，设置的意义不大。
children: node children的属性必须是一个ReactNode节点，表示唯一渲染一个元素。
与
首先来看如何执行匹配，决定
path：当location中的url改变后，会与Route中的path属性做匹配，path决定了与路由或者url相关的渲染效果。
exact: 如果有exact，只有url地址完全与path相同，才会匹配。如果没有exact属性，url的地址不完全相同，也会匹配。
举例来说，当exact不设置时：
<Route path='/home' component={Home}/>
<Route path='/home/first' component={First}/>此时url地址为：http://localhost:3000/home/first 的时候，不仅仅会匹配到 path='/home/first'时的组件First,同时还会匹配到path='home'时候的Router。
如果设置了exact：
<Route path='/home' component={Home}/>只有http://localhost:3000/home/first 不会匹配Home组件，只有url地址完全与path相同，只有http://localhost:3000/home才能匹配Home组件成功。
strict ：与exact不同，strict属性仅仅是对exact属性的一个补充，设置了strict属性后，严格限制了但斜线“／”。
举例来说,当不设置strict的时候：
<Route path='/home/' component={Home}/>此时http://localhost:3000/home 和 http://localhost:3000/home/
都能匹配到组件Home。匹配对于斜线“/”比较宽松。如果设置了strict属性：
<Route path='/home/' component={Home}/>那么此时严格匹配斜线是否存在，http://localhost:3000/home 将无法匹配到Home组件。
当Route组件与某一url匹配成功后，就会继续去渲染。那么什么属性决定去渲染哪个组件或者样式呢，Route的component、render、children决定渲染的内容。
component：该属性接受一个React组件，当url匹配成功，就会渲染该组件
render：func 该属性接受一个返回React Element的函数，当url匹配成功，渲染覆该返回的元素
children：与render相似，接受一个返回React Element的函数，但是不同点是，无论url与当前的Route的path匹配与否，children的内容始终会被渲染出来。
并且这3个属性所接受的方法或者组件，都会有location，match和history这3个参数。如果组件，那么组件的props中会存在从Link传递过来的location，match以及history。
to: string
to属性的值可以为一个字符串，跟html中的a标签的href一样，即使to属性的值是一个字符串，点击Link标签跳转从而匹配相应path的Route，也会将history，location，match这3个对象传递给Route所对应的组件的props中。
举例来说：
<Link to='/home'>Home</Link>
如上所示，当to接受一个string，跳转到url为'/home'所匹配的Route，并渲染其关联的组件内接受3个对象history，location，match。
这3个对象会在下一小节会详细介绍。
to: object
to属性的值也可以是一个对象，该对象可以包含一下几个属性：pathname、seacth、hash和state，其中前3个参数与如何改变url有关，最后一个state参数是给相应的改变url时，传递一个对象参数。
举例来说：
<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>在上个例子中，to为一个对象，点击Link标签跳转后，改变后的url为：'/home?sort=name#edit'。 但是在与相应的Route匹配时，只匹配path为'/home'的组件，'/home?sort=name#edit'。在'/home'后所带的参数不作为匹配标准，仅仅是做为参数传递到所匹配到的组件中，此外，state={a:1}也同样做为参数传递到新渲染的组件中。
介绍了
我们前面提到，Route匹配到相应的改变后的url，会渲染新组件，该新组件中的props中有history、location、match3个对象属性，其中hisotry对象属性最为关键。
同样以下面的例子来说明：
<Link to={{pathname:'/home',search:'?sort=name',hash:'#edit',state:{a:1}}}>Home</Link>
<Route exact path='/home' component={Home}/>我们使用了
// props中的history
action: "PUSH"
block: ƒ block()
createHref: ƒ createHref(location)
go: ƒ go(n)
goBack: ƒ goBack()
goForward: ƒ goForward()
length: 12
listen: ƒ listen(listener)
location: {pathname: "/home", search: "?sort=name", hash: "#edit", state: {…}, key: "uxs9r5"}
push: ƒ push(path, state)
replace: ƒ replace(path, state)从上面的属性明细中：
push:f 这个方法用于在js中改变url，之前在Link组件中可以类似于HTML标签的形式改变url。push方法映射于window.history中的pushState方法。
replace: f 这个方法也是用于在js中改变url，replace方法映射于window.history中的replaceState方法。
block：f 这个方法也很有用，比如当用户离开当前页面的时候，给用户一个文字提示，就可以采用history.block("你确定要离开当前页吗？")这样的提示。
go / goBack / goForward
在组件props中history的go、goBack、goForward方法，分别window.history.go、window.history.back、window.history.forward对应。
action: "PUSH" || "POP"
action这个属性左右很大，如果是通过Link标签或者在js中通过this.props.push方法来改变当前的url，那么在新组件中的action就是"PUSH",否则就是"POP".
action属性很有用，比如我们在做翻页动画的时候，前进的动画是SlideIn，后退的动画是SlideOut，我们可以根据组件中的action来判断采用何种动画：
function newComponent (props)=>{
return (
<ReactCSSTransitionGroup
transitionAppear={true}
transitionAppearTimeout={600}
transitionEnterTimeout={600}
transitionLeaveTimeout={200}
transitionName={props.history.action==='PUSH'?'SlideIn':'SlideOut'}
>
<Component {...props}/>
</ReactCSSTransitionGroup>
)
}location:object
在新组件的location属性中，就记录了从就组件中传递过来的参数，从上面的例子中，我们看到此时的location的值为：
hash: "#edit"
key: "uxs9r5"
pathname: "/home"
search: "?sort=name"
state: {a:1}除了key这个用作唯一表示外，其他的属性都是我们从上一个Link标签中传递过来的参数。
在第三节中我们介绍了React-router的大致使用方法，读一读React-router4.0的源码。
这里我们主要分析一下React-router4.0中是如何根据window.history来实现前端路由的，因此设计到的组件为BrowserRouter、Router、Route和Link
从上一节的介绍中我们知道，点击Link标签传递给新渲染的组件的props中有一个history对象，这个对象的内容很丰富，比如：action、goBack、go、location、push和replace方法等。
React-router构建了一个History类，用于在window.history的基础上，构建属性更为丰富的实例。该History类实例化后具有action、goBack、location等等方法。
React-router中将这个新的History类的构建方法，独立成一个node包，包名为history。
npm install history -s
可以通过上述方法来引入，我们来看看这个History类的实现。
const createBrowserHistory = (props = {}) => {
const globalHistory = window.history;
......
//默认props中属性的值
const {
forceRefresh = false,
getUserConfirmation = getConfirmation,
keyLength = 6,
basename = '',
} = props;
const history = {
length: globalHistory.length,
action: "POP",
location: initialLocation,
createHref,
push,
replace,
go,
goBack,
goForward,
block,
listen
}; ---- (1)
const basename = props.basename;
const canUseHistory = supportsHistory(); ----（2)
const createKey = () =>Math.random().toString(36).substr(2, keyLength); ----（3）
const transitionManager = createTransitionManager(); ----（4）
const setState = nextState => {
Object.assign(history, nextState);
history.length = globalHistory.length;
transitionManager.notifyListeners(history.location, history.action);
}; ----（5）
const handlePopState = event => {
handlePop(getDOMLocation(event.state));
};
const handlePop = location => {
if (forceNextPop) {
forceNextPop = false;
setState();
} else {
const action = "POP";
transitionManager.confirmTransitionTo(
location,
action,
getUserConfirmation,
ok => {
if (ok) {
setState({ action, location });
} else {
revertPop(location);
}
}
);
}
}; ------（6）
const initialLocation = getDOMLocation(getHistoryState());
let allKeys = [initialLocation.key]; ------（7）
// 与pop相对应，类似的push和replace方法
const push ... replace ... ------(8)
return history ------ （9）
}(1) 中指明了新的构建方法History所返回的history对象中所具有的属性。
(2)中的supportsHistory的方法判断当前的浏览器对于window.history的兼容性，具体方法如下：
export const supportsHistory = () => {
const ua = window.navigator.userAgent;
if (
(ua.indexOf("Android 2.") !== -1 || ua.indexOf("Android 4.0") !== -1) &&
ua.indexOf("Mobile Safari") !== -1 &&
ua.indexOf("Chrome") === -1 &&
ua.indexOf("Windows Phone") === -1
)
return false;
return window.history && "pushState" in window.history;
};从上述判别式我们可以看出，window.history在chrome、mobile safari和windows phone下是绝对支持的，但不支持安卓2.x以及安卓4.0
(3)中用于创建与history中每一个url记录相关联的指定位数的唯一标识key, 默认的keyLength为6位
(4)中 createTransitionManager方法，返回一个集成对象，对象中包含了关于history地址或者对象改变时候的监听函数等，具体代码如下：
const createTransitionManager = () => {
const setPrompt = nextPrompt => {
};
const confirmTransitionTo = (
location,
action,
getUserConfirmation,
callback
) => {
if (typeof getUserConfirmation === "function") {
getUserConfirmation(result, callback);
} else {
callback(true);
}
}
};
let listeners = [];
const appendListener = fn => {
let isActive = true;
const listener = (...args) => {
if (isActive) fn(...args);
};
listeners.push(listener);
return () => {
isActive = false;
listeners = listeners.filter(item => item !== listener);
};
};
const notifyListeners = (...args) => {
listeners.forEach(listener => listener(...args));
};
return {
setPrompt,
confirmTransitionTo,
appendListener,
notifyListeners
};};
setPrompt函数，用于设置url跳转时弹出的文字提示，confirmTransaction函数，会将当前生成新的history对象中的location，action，callback等参数，作用就是在回调的callback方法中，根据要求，改变传入的location和action对象。
接着我们看到有一个listeners数组，保存了一系列与url相关的监听事件数组，通过接下来的appendListener方法，可以往这个数组中增加事件，通过notifyListeners方法可以遍历执行listeners数组中的所有事件。
(5) setState方法，发生在history的url或者history的action发生改变的时候，此方法会更新history对象中的属性，同时会触发notifyListeners方法，传入当前的history.location和history.action。遍历并执行所有监听url改变的事件数组listeners。
(6)这个getDOMLocation方法就是根据当前在window.state中的值，生成新history的location属性对象，allKeys这是始终保持了在url改变时候的历史url相关联的key，保存在全局，allKeys在执行生“POP”或者“PUSH”、“Repalce”等会改变url的方法时，会保持一个实时的更新。
(7) handlePop方法，用于处理“POP”事件，我们知道在window.history中点击后退等会触发“POP”事件，这里也是一样，执行action为“POP”，当后退的时候就会触发该函数。
(8)中包含了与pop方法类似的，push和replace方法，push方法同样做的事情就是执行action为“PUSH”（“REPLACE”），该变allKeys数组中的值，唯一不同的是actio为“PUSH”的方法push是往allKeys数组中添加，而action为“REPLACE”的方法replace则是替换掉当前的元素。
(9)返回这个新生成的history对象。
其实最难弄懂的是React-router中如何重新构建了一个history工厂函数，在第一小节中我们已经详细的介绍了history生成函数createBrowserHistory的源码，接着来看Link组件就很容易了。
首先Link组件类似于HTML中的a标签，目的也很简单，就是去主动触发改变url的方法，主动改变url的方法，从上述的history的介绍中可知为push和replace方法，因此Link组件的源码为：
class Link extends React.Component {
handleClick = event => {
...
const { history } = this.context.router;
const { replace, to } = this.props;
if (replace) {
history.replace(replace);
} else {
history.push(to);
}
}
};
render(){
const { replace, to, innerRef, ...props } = this.props;
<a {...props} onClick={this.handleClick}/>
}
}上述代码很简单，从React的context API全局对象中拿到history，然后如果传递给Link组件的属性中有replace为true，则执行history.replace(to),to 是一个包含pathname的对象，如果传递给Link组件的replace属性为false，则执行history.push(to)方法。
Route组件也很简单，其props中接受一个最主要的属性path，Route做的事情只有一件：
当url改变的时候，将path属性与改变后的url做对比，如果匹配成功，则渲染该组件的componet或者children属性所赋值的那个组件。
具体源码如下：
class Route extends React.Component {
....
constructor(){
}
render() {
const { match } = this.state;
const { children, component, render } = this.props;
const { history, route, staticContext } = this.context.router;
const location = this.props.location || route.location;
const props = { match, location, history, staticContext };
if (component) return match ? React.createElement(component, props) : null;
if (render) return match ? render(props) : null;
if (typeof children === "function") return children(props);
if (children && !isEmptyChildren(children))
return React.Children.only(children);
return null;
}
}state中的match就是是否匹配的标记，如果匹配当前的Route的path，那么根据优先级顺序component属性、render属性和children属性来渲染其所指向的React组件。
Router组件中，是BrowserRouter、HashRouter等组件的底层组件。该组件中，定义了包含匹配规则match函数，以及使用了新history中的listener方法，来监听url的改变，从而，当url改变时，更改Router下不同path组件的isMatch结果。
class Router extends React.Component {
componentWillMount() {
const { children, history } = this.props
//调用history.listen监听方法，该方法的返回函数是一个移除监听的函数
this.unlisten = history.listen(() => {
this.setState({
match: this.computeMatch(history.location.pathname)
});
});
}
componentWillUnmount() {
this.unlisten();
}
render() {
}
}上述首先在组件创建前调用了listener监听方法，来监听url的改变，实时的更新isMatch的结果。
本文从前端路由的原理出发，先后介绍了两种前端路由常用的方法，接着介绍了React-router的基本组件API以及用法，详细介绍了React-router的组件中新构建的history对象，最后结合React-router的API阅读了一下React-router的源码。
위 내용은 라우팅부터 시작하여 React-Router 4.0 소스코드에 대한 심층적인 이해의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
