面试题答案
一键面试原理区别
- BrowserRouter：基于HTML5的history API，通过
history.pushState()和history.replaceState()来改变URL，同时监听popstate事件来响应浏览器的前进、后退操作。这种方式直接操作浏览器历史记录栈，使得URL看起来更简洁、更符合常规的Web URL格式。 - HashRouter：利用URL中的哈希值（即
#部分）来实现路由功能。通过监听hashchange事件，当哈希值发生变化时，触发相应的路由切换。哈希值的变化不会导致浏览器向服务器发送请求，因为它不属于URL的正式部分。
URL表现形式区别
- BrowserRouter：URL表现为标准的路径形式，例如
http://example.com/path/to/page，没有#符号，看起来更直观和规范，与传统的Web页面URL形式一致。 - HashRouter：URL中包含
#符号，例如http://example.com/#/path/to/page，哈希值部分会被浏览器忽略，不会作为请求的一部分发送到服务器。
应用场景区别
- BrowserRouter：
- 适用于需要优化SEO的应用：因为搜索引擎爬虫能够更好地理解和处理标准的URL结构，有利于页面的索引和排名。
- 服务器端支持良好的场景：需要服务器端进行配置，以确保所有的路由请求都能正确地返回对应的页面。例如，在Node.js的Express服务器中，可以通过配置
app.use(express.static('public'))和app.get('*', (req, res) => res.sendFile(path.join(__dirname, 'public', 'index.html')))来支持BrowserRouter。
- HashRouter：
- 适用于单页应用（SPA）且不需要考虑SEO的场景：如一些纯前端的Web应用，用户交互性强但对搜索引擎可见性要求不高。
- 部署在不支持HTML5 history API的环境中：例如一些较旧的浏览器或者某些特定的网络环境，HashRouter能够提供更广泛的兼容性，因为它不依赖于HTML5的新特性。