【taro react】---- h5路由配置取消路由上的#

Rattenking

已于 2022-08-17 16:03:37 修改

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

于 2022-04-28 14:49:56 首次发布

本文链接：https://blog.csdn.net/m0_38082783/article/details/124473946

Taro React 入门到实战系列同时被 2 个专栏收录

58 篇文章 ¥9.90 ¥99.00

订阅专栏

超级会员免费看

React

17 篇文章

订阅专栏

本文档介绍了如何在Taro React项目中配置H5路由，以便消除URL中的'#'符号。通过调整h5.router设置，可以选择使用'hash'或'browser'路由模式。在'browser'模式下，路由将变为期望的无'#'形式，如https://{{domain}}/pages/index/index。配置变更位于config/index.js文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

默认打包访问路由

https://{ {domain}}/#/pages/index/index

期望打包访问路由

https://{ {domain}}/pages/index/index

解决文档

taro 路由相关的配置 h5.router

配置路由模式

配置路由模式。‘hash’ 与 ‘browser’ 分别对应 hash 路由模式和浏览器 history 路由模式。默认值：‘hash’。

实例

修改项目 config/index.js

module.exports = {
  // ...
  h5: {
    // ...
    router: {
      mode: 'browser' // 或者是 'hash'
    }
  }
}

针对上面的配置

了解本专栏

订阅专栏解锁全文

超级会员免费看

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Rattenking

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
打赏
打赏
打赏举报

举报

专栏目录

订阅专栏

【taro react】 ---- 解决编译 H5 时，偶尔出现多页面一起展示

止于至善

12-17

136

框架编译后我怀疑就生命周期的执行问题，导致出现了页面没有隐藏的问题，但是多人开发，你也不能修改taro的代码，所以只能在他实现的基础上补充；生命周期拦截的解决方案，这个要求页面必须是 class 组件，才能监听到对应的页面，进行设置，如果使用的 hooks 开发页面，那么这里的拦截不会生效，需要你手动添加页面的显示和隐藏设置代码，由于项目已经维护很久，所以工作量会比较大，因此增加了方案三，路由的监听；

Taro React 系列文章 - 总目录

止于至善

08-17

512

欢迎大家来到 Rattenking 的《Taro React 入门到实战系列》，开始前博主先列出 Taro React 入门到实战的大纲，同时包括遇到的一些常见报错。实战篇是实际开发中的组件的封装，部分比较有意思的效果，以及一些特殊实际问题的解决办法！入门篇介绍了从安装，开发中的配置问题，记录解决对应的问题。错误篇是在实际开发中遇到的一些错误的处理方法！问题篇是开发中遇到的一些问题的解决方法！...

参与评论您还未登录，请先登录后发表或查看评论

如何去掉react router中的‘#’号

Vernal_F的专栏

09-16

1793

使用createBrowserHistory： import React from "react"; import { Route, HashRouter, Switch, Router } from "react-router-dom"; import { createBrowserHistory } from "history"; import Home from "../pages/Home"; import Movies from "../pages/Movies"; import NotFoun

Taro+react开发（83):taro路由配置

歌谣的博客

09-21

787

taro H5配置 cdn css js 缓存 hash 配置

gwdgwd123的博客

06-21

3098

1.taro使用详情请参考本https://nervjs.github.io/taro/docs搭建 2.关于文件的配置,在config/index.js添加相关配置使得pages下面对应的文件夹可以使用对应的文件名而不是index.js,例如home.js 使得src下面的文件引用可以采用'@utils/jump'的引用方式(包括action,reducer,utils,styles等...

Taro学习笔记_路由配置、传参、跳转

kyyius的博客

07-04

1259

路由配置 src/app.config.js下的pages属性进行设置谁在第一项打开的页面就在哪里 window属性是设置小程序一些样式的使用 taro create xxx 可以快速在pages下创建页面跳转API navigateTo 页面跳转，可以返回 redirectTo 不记录上一页跳转 switchTab Tab之间切换，配合Taro的导航栏一起使用 navigateBack 返回上一页 relaunch 关闭所有页面，打开一个页面 getCurrentPages 获得当前页面的一些配置

react配置路由的时候地址栏的井号（#）去除方法，新方法。

high_height的博客

01-03

6513

今天在搭建框架的时候使用了router之后，地址栏的#号很碍眼，查了资料后发现react-router的新版本不能直接import browserHistory方法去解决这个井号，找到了这个方法：把history的改为这个就ok的了，很简单，做一次记录。 ...

react-用React编写的基于TaroDva构建的适配不同端的时装衣橱

08-14

5. 路由配置：结合Taro的路由机制，实现页面间的跳转。 6. 样式设计：可以使用CSS-in-JS库如styled-components或Less/Sass，为应用添加美观的样式。 7. 测试与优化：进行单元测试、集成测试，确保代码质量和性能，...

react-Taro是京东一套遵循React语法规范的多端开发解决方案

08-14

3. **路由配置**：利用Taro的路由管理，规划和设置应用的导航结构。 4. **数据管理**：可以结合Redux或MobX等状态管理工具，处理应用的状态变化。 5. **编译与打包**：通过Taro的命令行工具，将源代码编译为不同平台...

taro全局配置页面路由和tabBar页面跳转

11-01

2204

有能力可以看官方文档：页面路由配置，配置在app.config.ts里面的pages里：window用于设置小程序的状态栏、导航条、标题、窗口背景色，其配置项如下：

Taro H5项目路由动画坑之animation:false

qq_42372534的博客

06-18

370

【代码】Taro H5项目路由动画坑之animation:false。

使用React-router时如何去掉url上的#号

最新发布

qq_40693662的博客

07-13

1099

.router 是在 app.tsx 里面全局注入的，注入后，在所有文件里面都可以调用push 是一个跳转的方法，也可以叫其他名字参数1 是跳转的路径，参数2 是带给下一个页面的参数age: 30,hobbys: {},})

taro之--路由与tabbar

m0_74433188的博客

03-24

651

其中前三个页面我们可以把它们规划在 tabBar 里，tabBar 是 Taro 内置的导航栏，可以在 app.config.js 配置，配置完成之后处于的 tabBar 位置的页面会显示一个导航栏。到目前为止，我们已经实现了这个应用的所有逻辑，除去「节点列表」页面（在进阶指南我们会讨论这个页面组件）之外，剩下的页面都可以通过我们已经讲解过的组件或页面快速抽象完成。在 src/components/thread 组件中，我们通过。首页，展示最新帖子（已完成）节点帖子（可通过组件复用）帖子详情（已完成）

nginx去除vue、react项目#

user_xbp的博客

05-09

1851

vue设置路由为history 模式，react设置路由为BrowserRouter。 location / { root D:/workSpace/project/build; try_files $uri /index.html; }

【taro】taro取消路由上的#

我的开源项目:https://gitee.com/derekgo/vue-cms_xg

01-17

605

解决流程在项目config/index.js修改以下内容 h5: { publicPath: '/', staticDirectory: 'static', postcss: { autoprefixer: { enable: true, config: { } }, cssModules: { enable: false, // 默认为 false，如需使用 css modules

解决React路由URL中hash(#)部分的显示、browserHistory打包后浏览器刷新页面出现404的问题

gman344的博客

08-03

1253

摘要　　在React项目中，我们需要采用它的路由库React-Router来进行页面跳转，React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式，一种是hashHistory的形式，形如：localhost:3000/#/free-lesson的路由，另一种是browserHistory的形式，形如：localhost:3000/person-center的真实URL路由。在实际项目中常常用真实的URL的方式，但是该形式存在一个隐藏的问题，就是项目打包后，浏览器页面刷新会出现4...

React Native 项目搭建设置或取消git全局代理

Leo_DLi的博客

11-02

258

然后对应的代理端口为【具体的代理端口得依赖于本机代理软件】

Taro多端统一框架学习（三）Taro的组件和Taro的路由

jason_renyu的博客

02-12

6314

从这节开始就要进入Taro的编码部分，Taro的编码是用React的方式，现在的React在普及用React Hooks的方式来书写React，那么在Taro的学习和使用中，我们也将以Hooks的方式来。 Taro使用Hooks的新特性 React Hooks的优缺点既然我们要用Hooks来写，我们就要了解React Hooks的优缺点，为什么要用Hooks，那么我们就来看下Hooks的优缺点吧...