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

最新推荐文章于 2025-08-10 19:55:50 发布
原创 最新推荐文章于 2025-08-10 19:55:50 发布 · 6.5k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react-router

本文介绍了一种在使用React Router时去除地址栏中#号的方法，通过更改history配置，实现更美观的URL展示。

今天在搭建框架的时候使用了router之后，地址栏的#号很碍眼，查了资料后发现react-router的新版本不能直接import browserHistory方法去解决这个井号，找到了这个方法：

 

把history的改为这个就ok的了，很简单，做一次记录。

【taro react】---- h5路由配置取消路由上的#
止于至善
04-28 1611
默认打包访问路由 https://{{domain}}/#/pages/index/index 期望打包访问路由 https://{{domain}}/pages/index/index 解决文档 taro 路由相关的配置 h5.router 配置路由模式 配置路由模式。‘hash’ 与 ‘browser’ 分别对应 hash 路由模式和浏览器 history 路由模式。默认值：‘hash’。 实例 module.exports = { // ... h5: { // ...
React——路由Route
敲代码的小李同学的博客
07-08 2397
React 中路由的学习，包括Route组件的介绍与应用、前端渲染与后端渲染、参数化路由、重定向路由以及嵌套路由。
如何去掉react router中的‘#’号
Vernal_F的专栏
09-16 1824
使用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
react 去掉地址栏的#号
baidu_41604826的博客
04-01 5117
去掉地址栏的#号 使用react 配合dva 搭建的项目，项目运行之后，默认的地址栏是会有一个#号的，很烦，不想见到它，处理方式如下： 超级简单： 下载插件：history cnpm i history --save 找到index.js文件，在文件中做如下修改 引入： import { createBrowserHistory } from 'history'; 使用： // 1...
React路由
最新发布
weixin_63877292的博客
08-10 1031
本文聚焦前端路由与 React - Router - Dom 库，先阐释前端路由概念，对比传统与前端路由的交互差异，接着介绍 HashRouter、BrowserRouter 等 5 种路由模式及适用场景，重点剖析 React - Router - Dom 里 Route 组件的 path、element 等 10 余个属性功能与用法，还讲解 Routes、Link、NavLink 等组件作用，涵盖路由规则定义、页面跳转、样式区分、重定向、离开提示等能力，为 React 应用路由开发提供清晰指引与实践参考
使用React-router时如何去掉url上的#号
热门推荐
weixin_42727360的博客
11-15 1万+
Router组件的history属性，用来监听浏览器地址栏的变化，并将URL解析成一个地址对象，供 React Router 匹配。 history属性，一共可以设置三种值。 browserHistory hashHistory createMemoryHistory 如果设为hashHistory，路由将通过URL的hash部分（#）切换，URL的形式类似example.com/#/some/p...
react-router 路由配置去掉url上的#号且刷新子页面请求404处理
阿梦的博客
02-07 2169
react-router 路由配置上的url的#号 具体处理方式详见： 使用React-router时如何去掉url上的#号 将router.js中的hashHistory改为browserHistory 此时url上的#号虽然处理，但是刷新子页面时会显示404 直接向服务器请求某个子路由，会显示网页找不到的404错误 具体处理方式详见： 刷新子页面请求404处理 import React fro...
使用React-router时去掉url上的井号
Quincy.Coder的博客
03-15 9572
参考文章： http://react-china.org/t/react-router-url/6333 import {browserHistory} from 'react-router' <Router history={browserHistory}> ... </Router>
Nginx配置React项目Url后直接输入路由路径时报404问题的解决
09-30
然而，在部署React应用到服务器时，尤其是使用Nginx作为反向代理服务器时，可能会遇到一个常见的问题：当用户直接在浏览器地址栏输入特定的路由路径（如`http://localhost/demo/page1`）时，服务器返回404错误。...
react路由详解
m0_56947432的博客
07-07 1097
​ 比如:用户要看首页,我们就让用户点击一个指向首页的a标签,点击之后,浏览器地址栏的路径会发生变化. 我们就可以通过最新的路径,去判断用户要看哪个页面视图. /home 表示用户要查看首页. 当路径是/detail的时候,表示用户要看详情页。实现单页面应用的原理: 只加载一个html页面(整个网站所有的视图(每一个单独页面))都包含在这个html页面中.当用户要打开首页的时候,就只展示首页对应的视图,其他的隐藏.当用户要查看详情页的时候,只展示详情页视图,其他的视图隐藏。
React进行路由跳转的方法汇总
yiguoxiaohai的博客
02-11 1751
在 React 中进行路由跳转有多种方法，具体取决于你使用的路由库和版本。以下是常见的路由跳转方法汇总，主要基于 react-router-dom 库。
react路由地址栏不跳完成页面切换
02-28
React路由地址栏变化但页面不刷新或组件不重新渲染的问题通常是由于配置不当导致的。以下是一些可能的原因和解决方案： ### 可能原因及解决方法 #### 1. 使用了错误的历史模式 确保您正在使用的`<Router>`是正确的...
nginx服务器配置vue-router history模式（去除url中的#号）
weixin_34290631的博客
12-27 4041
前言：关于单页原理 hash模式和history模式 请自行查阅资料 ------- 复制代码 按照vue-router官网的办法 https://router.vuejs.org/zh/guide/essentials/history-mode.html#后端配置例子 问题的起因是配置nginx后，发现页面刷新失败，报错：Uncaught SyntaxError: Unexpected to...
React + Router 去除#号 (hashHistory 修改为 browserHistory)
死磕JAVA的老司机
12-02 1606
nginx解决vue上线去掉#的方法
caichenglongcsdn的博客
07-23 5173
最近vue项目要上线了，但是习惯于原来的网址方式，vue是自动会追加#的，后来出于强迫症，就像把这个#去掉，一方面看着舒服，另一方面对于一写网站的分享的问题也会避免，例如微信H5分享会把链接#后面的忽略掉，于是我就在nginx上面进行了一下处理。 server { listen 80; server_name www.xx.com; location / { root /opt/index/dist; index index.html index...
react路由配置
unhejing的博客
10-24 1172
路由懒加载，指的是我们希望当用户访问到对应的路由后，才开始加载对应的组件。通常会用于页面简单且用户访问量比较少的组件。HashRouter 实际上指的就是 hash 模式，hash 模式的路由在浏览器的路径中会有。404 路由和普通一级路由的配置方式一致，只需要在所有路由配置的最后，添加一个。BrowserRouter 实际上指的就是 history 模式。React Router 的路由配置，可以直接在。配置完成后，我们就可以在浏览器中通过。
理解react-router路由跳转路径上的“#”
https://github.com/Bot80926
02-24 5240
碎碎念：之前用react-router的时候直接用的旧项目默认配置，没有仔细去了解为什么url上面会自带#，趁着周末查阅了一下资料，自己总结一下。 一、理解什么是react-router history 直接拿开发文档里的原话： React Router 是建立在 history 之上的。 简而言之，一个 history 知道如何去监听浏览器地址栏的变化， 并解析这个 URL 转化为 lo...
#React#基础学习笔记#01-React基础
老衲的少女心i~
05-25 340
1.React概述 1.1什么是react 用户构建用户界面的JavaScript库 用户界面：html页面（前端） react主要用来写html页面，或构建web应用 如果从mvc的角度来看，react仅仅是视图层（V），也就是只负责视图的渲染，而并非提供了完整的M和C的功能。 1.2特点 声明式 基于组件 组件是react最重要的内容 组件表示页面中的部分内容 组合、复用多个组件，可以实现完整的页面功能 学习一次，随处使用 使用react可以web应用 使用react可以开发移动端原生应用（react-
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值