React 中常用的两种路由模式是 HashRouter 和 BrowserRouter。它们分别使用不同的方式来管理和监听 URL 变化。以下是这两种路由模式的实现原理。
- HashRouter
HashRouter 使用 URL 的哈希部分(即 # 后面的部分)来保持 UI 和 URL 的同步。哈希部分不会被发送到服务器,因此这种方式不需要服务器配置。
实现原理
URL 结构:http://example.com/#/path
监听方式:通过监听 hashchange 事件来检测 URL 变化。
优点:简单易用,不需要服务器配置。
缺点:URL 中包含 #,不太美观。
工作流程
初始化:应用启动时,读取 window.location.hash,并根据哈希值渲染相应的组件。
导航:当用户点击链接或调用导航函数时,更新 window.location.hash。
监听变化:通过监听 hashchange 事件,检测 URL 哈希部分的变化,并根据新的哈希值渲染相应的组件。
示例代码
import React, { useEffect, useState } from "react";
const HashRouterExample = () => {
const [page, setPage] = useState(window.location.hash.substring(1) || "home");
useEffect(() => {
const handleHashChange = () => {
setPage(window.location.hash.substring(1) || "home");
};
window.addEventListener("hashchange", handleHashChange);
return () => {
window.removeEventListener("hashchange", handleHashChange);
};
}, []);
const navigateTo = (page) => {
window.location.hash = #${page}
;
};
return (
{page === "home" &&
{page === "about" &&
{page === "contact" &&
);
};
export default HashRouterExample;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
- BrowserRouter
BrowserRouter 使用 HTML5 的 history API 来保持 UI 和 URL 的同步。这种方式需要服务器配置,以确保所有路由都指向同一个 HTML 文件。
实现原理
URL 结构:http://example.com/path
监听方式:通过监听 popstate 事件来检测 URL 变化。
优点:URL 更加美观,没有 #。
缺点:需要服务器配置,以确保所有路由都指向同一个 HTML 文件。
工作流程
初始化:应用启动时,读取 window.location.pathname,并根据路径渲染相应的组件。
导航:当用户点击链接或调用导航函数时,使用 history.pushState 更新 URL。
监听变化:通过监听 popstate 事件,检测浏览器历史记录的变化,并根据新的路径渲染相应的组件。
示例代码
import React, { useEffect, useState } from "react";
const BrowserRouterExample = () => {
const [page, setPage] = useState(window.location.pathname.substring(1) || "home");
useEffect(() => {
const handlePopState = (event) => {
setPage(window.location.pathname.substring(1) || "home");
};
window.addEventListener("popstate", handlePopState);
return () => {
window.removeEventListener("popstate", handlePopState);
};
}, []);
const navigateTo = (page) => {
const state = { page };
const title = page.charAt(0).toUpperCase() + page.slice(1) + " Page";
const url = /${page}
;
history.pushState(state, title, url);
setPage(page);
};
return (
{page === "home" &&
{page === "about" &&
{page === "contact" &&
);
};
export default BrowserRouterExample;
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
服务器配置
对于 BrowserRouter,你需要配置服务器以处理所有路由请求。例如,在 Apache 中,你可以使用 .htaccess 文件:
RewriteEngine On
RewriteBase /
RewriteRule ^index.html$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.html [L]
1
2
3
4
5
6
7
8
在 Nginx 中,你可以在配置文件中添加以下内容:
location / {
try_files $uri $uri/ /index.html;
}
1
2
3
总结
HashRouter:使用 URL 的哈希部分,通过 hashchange 事件监听 URL 变化,不需要服务器配置。
BrowserRouter:使用 HTML5 的 history API,通过 popstate 事件监听 URL 变化,需要服