React-router v7 第二章(路由模式)

路由模式

在React RouterV7 中,是拥有不同的路由模式,路由模式的选择将直接影响你的整个项目。React Router 提供了四种核心路由创建函数: createBrowserRoutercreateHashRoutercreateMemoryRoutercreateStaticRouter

1. createBrowserRouter(推荐)

核心特点:
  • 使用HTML5的history API (pushState, replaceState, popState)
  • 浏览器URL比较纯净 (/search, /about, /user/123)
  • 需要服务器端支持(nginx, apache,等)否则会刷新404
使用场景:
  • 大多数现代浏览器环境
  • 需要服务器端支持
  • 需要URL美观

2. createHashRouter

核心特点:
  • 使用URL的hash部分(#/search, #/about, #/user/123)
  • 不需要服务器端支持
  • 刷新页面不会丢失
使用场景:
  • 静态站点托管例如(github pages, netlify, vercel)
  • 不需要服务器端支持

3. createMemoryRouter

核心特点:
  • 使用内存中的路由表
  • 刷新页面会丢失状态
  • 切换页面路由不显示URL
使用场景:
  • 非浏览器环境例如(React Native, Electron)
  • 单元测试或者组件测试(Jest, Vitest)

4. createStaticRouter

核心特点:
  • 专为服务端渲染(SSR)设计
  • 在服务器端匹配请求路径,生成静态 HTML
  • 需与客户端路由器(如 createBrowserRouter)配合使用
使用场景:
  • 服务端渲染应用(如 Next.js 的兼容方案)
  • 需要SEO优化的页面

解决刷新404问题

当使用createBrowserRouter时,如果刷新页面会丢失状态,这是因为浏览器默认会去请求服务器上的资源,如果服务器上没有资源,就会返回404。 要解决这个问题就需要在服务器配置一个回退路由,当请求的资源不存在时,返回index.html

  • Nginx(推荐)

下载地址:Nginx

bash 复制代码
location / {
  try_files $uri $uri/ /index.html;
}
  • Apache
bash 复制代码
<IfModule mod_negotiation.c>
  Options -MultiViews
</IfModule>

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>
  • Vercel
json 复制代码
{
  "rewrites": [{ "source": "/:path*", "destination": "/index.html" }]
}
  • Nodejs
js 复制代码
const http = require('http')
const fs = require('fs')
const httpPort = 80

http
  .createServer((req, res) => {
    fs.readFile('index.html', 'utf-8', (err, content) => {
      if (err) {
        console.log('We cannot open "index.html" file.')
      }

      res.writeHead(200, {
        'Content-Type': 'text/html; charset=utf-8',
      })

      res.end(content)
    })
  })
  .listen(httpPort, () => {
    console.log('Server listening on: http://localhost:%s', httpPort)
  })
相关推荐
一城烟雨_4 小时前
vue3 实现将html内容导出为图片、pdf和word
前端·javascript·vue.js·pdf
树懒的梦想5 小时前
调整vscode的插件安装位置
前端·cursor
低代码布道师6 小时前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧6 小时前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信7 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子7 小时前
CSS单位完全指南
前端·css
SunTecTec8 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪9 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程9 小时前
ES练习册
java·前端·elasticsearch
Asthenia04129 小时前
Netty编解码器详解与实战
前端