程序员经验分享-hwhale

如何在应用程序级别设置react-router的基本url？

2024-04-22

我有一个使用 create-react-app 创建的应用程序，我想将其安装在我网站的子目录中。推荐的方法是添加process.env.PUBLIC_URL作为基本网址。 IE：

<Route exact path={`${process.env.PUBLIC_URL}/signin`} component={SigninPage}/>

现在有没有一种方法可以在应用程序级别设置它，这样我就不必在每个路由、链接或导航链接上重复这段代码？

Thanks!


您可以将其设置为basename在你的Router，这里是 React 路由器文档的链接：basename in BrowserRouter https://reacttraining.com/react-router/web/api/BrowserRouter/basename-string and basename in HashRouter https://reacttraining.com/react-router/web/api/HashRouter/basename-string。它看起来像这样：

<Router basename={process.env.PUBLIC_URL}>
</Router>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

ReactJS

reactrouterv4

createreactapp

baseUrl

如何在应用程序级别设置react-router的基本url？ 的相关文章

  • 以编程方式更改 Redux-Form 字段值

    当我使用redux formv7 我发现没有办法设置字段值 现在在我的form 我有两个select成分 当第一个时 第二个的值就会很清楚select元件值改变 在类渲染中 div div site div div div div

  • 如何在 Gatsby 页面上包含本地 JavaScript？

    我是一个完全的 React 新手 我想这里有些基本的东西我不太明白 默认的 Gatsby 页面如下所示 有没有办法像这样使用本地 js 文件 我想要实现的是让反应忽略script js但仍然让客户端使用它 默认的 Gatsby 页面看起来像

  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token

  • 在 React 中将模板分离到外部文件

    我正在为客户开发 ReactJS 应用程序 我希望客户端能够自定义应用程序中的一些配置和模板 所以我创建了一个config js file window APP CONFIG url example com template item di

  • 没有 Props 的 TypeScript React State

    我想利用 TypeScript 中的静态和强类型 但仅限于状态 因为我不打算采用任何道具 当我尝试传递接口时 最终出现错误 import as React from react import Link from react router d

  • 从旧的外部 Javascript 更改 React 组件的状态？

    如何从旧的 jQuery soup 中更改 React 组件的状态 代码 我有一个这样的组件 var AComponent React createClass getInitialState function return ids rend

  • react-route,react-hot-loader.webpack（您无法更改 ；它将被忽略）

    这是我的第一个项目react react router react hot loader webpack dev server and webpack 当我更改react组件中的代码时 热加载器生效 但同时控制台告诉我一个警告 您无法更改

  • React 应用程序中的 addEventListener 不起作用

    一些背景 我正在尝试消费自定义网络组件在 React 应用程序中并尝试监听来自 Web 组件的事件 我相信您不能只在自定义 Web 组件上以通常的反应方式处理事件 i e

  • 如何使用draft.js更改光标位置？

    我想知道在键盘命令上完成文本插入后如何更改 Draft js 中的光标位置 因此我目前正在使用 handleKeyCommand cmd 每当用户按下特定按钮时插入自定义文本块 接下来我尝试了以下操作 currentState this s

  • 如何在 React 中测试表单提交？

    我有以下 React 组件 export default class SignUpForm extends React Component doSignupForm event Some API call render return div

  • React Native：加载图像后应用程序性能不佳

    加载图像似乎没有问题 但是加载完毕后就出现问题了 在我的应用程序中 我在整个游戏中一张一张地加载卡片图像 一旦我加载了 40 张卡片图像 整个应用程序就会变得很慢 它总是发生在第 40 个图像处 当我在第 40 个图像之后继续加载更多卡片图

  • 打字稿 - 字符串'不可分配给类型'FC

    我收到以下错误 Type props PropsWithChildren lt amount number gt gt string is not assignable to type FC lt amount number gt Type

  • 需要有关 React Js 的帮助

    我是 React Js 新手 我的代码无法正常工作 请看下面 这是我的脚本文件Main jsx 该文件由 React 编译 输出放置在 dist 文件夹下的 main js 文件中 var react require react react

  • 在 React Native 中将 Props 传递到屏幕

    我已经开始学习 React Native 并且一如既往地从创建可重用组件开始 我了解了如何在创建自定义组件时传递和访问 props 我想在 React Native 中创建一个基本屏幕 它具有通用属性 并且我的应用程序中的所有屏幕都可以设置

  • 如何在 React 组件测试中使用 data-testid 属性？

    我正在对一个简单的反应组件进行组件测试 我想渲染该组件 然后对其进行一些测试 问题是cy get 似乎没有找到基于的组件data testid属性 我用一个简单的方法测试了它div和div能找到就好了 我在检查时也注意到DOM在 cypre

  • 将 firestore 中的数据分配给变量

    我尝试使用 get doc 函数将 firestore 数据库中的变量分配给它们所尊重的值 我注意到它不会分配或更新这些值 我尝试使用异步和等待 但似乎无法使其工作 getFromDatabase nameOfCollection name

  • React-redux useDispatch() 未捕获类型错误

    我正在尝试创建一个简单的组件来使用 React Redux 钩子分派操作useDispatch 我收到一个错误 我已将组件修剪到发生错误的位置 当调用 useDispatch 函数时会发生这种情况 import useDispatch fr

  • 如何将React版本17降级到16？

    由于 React 17 不支持许多 React 包 如何将 React 版本从 17 降级到 16 假设您使用 npm yarn 或其他节点包管理器 依赖项版本列在package json 搜索react and react dom包下de

  • 如何获取使用 .map 渲染的第一个元素的 ref？

    我需要在几行中显示视频 卡片 的缩略图 并重点关注第一个缩略图 我使用嵌套地图进行了显示 该代码基本上迭代视频数组并返回多行视频 我们如何关注第一个渲染的元素 我认为我们需要获得第一个要聚焦的元素的引用 但是我们如何在这里设置 ref 并在

  • React Native - 跨屏幕传递数据

    我遇到了一些麻烦react native应用程序 我不知道如何跨屏幕传递数据 我意识到还有其他类似的问题在 SO 上得到了回答 但是这些解决方案对我来说不起作用 我正在使用StackNavigator 这是我的设置App js file e

随机推荐

  • C#：将设置导入文件/从文件导出设置

    从应用程序内将应用程序内部设置导入 导出到文件中的最佳方法是什么 我有 Settings settings 文件 与设置文件绑定的 winform UI 并且我想要导入 导出设置 类似于 Visual Studio 导入 导出设置功能 如果

  • 如何测试 ANT 中的目录是否为空？

    如何测试 ant 中的目录是否为空 您可以使用pathconvert http ant apache org manual Tasks pathconvert html任务来做到这一点 与setonempty财产

  • Lua中如何对数字表求和？

    Lua有内置的吗sum 功能 我似乎找不到一个 我几乎翻遍了文档中的所有地方 或许table sum 或类似的东西 以遵循当前的约定 但由于我找不到它 我不得不实现它 function sum t local sum 0 for k v i

  • Magento - 检查管理员和客户是否登录

    我有一个安装了 Magento 1 4 0 1 的 Web 服务器 我有另一个与之共享凭据的网站 我已经设法检查客户是否登录 在更改 Magento 中的 cookie 位置之后 但是当我还尝试确定管理员是否登录时 事情变得复杂 我只能得到

  • 当标题顺序更改时，带有状态保存的数据表过滤器会导致问题

    我有一个html页面和一些 javascript 代码 下面是我的工作html table class table table hover thead tr th class color white Employee ID th th cl

  • 检查用户是否是 SQL Server 中 dbo 角色的成员

    我需要一个 T SQL 语句来检查用户是否是 SQL Server 中数据库角色的成员 具体来说 我需要知道用户是否是 dbo 角色的成员 因为这样我就不必向该用户授予额外的权限 如果我尝试在用户为 dbo 时添加额外权限 则会失败 并且我

  • 在同一端口上支持 IPv6 和 IPv4 的 C# 服务器

    是否有可能有一个同时侦听和接受 IPv6 和 IPv4 客户端的 Socket 我在 C 中使用了 IPv6 套接字 希望它能自动向后兼容 但 IPv4 客户端会导致无效的 ip 地址异常 看一看 您可以接受 IPv4 客户端以及 IPv6

  • 有关如何部署 C++ 代码以在任何地方工作的提示

    我不是在谈论制作可移植代码 这更多的是一个分配问题 我有一个中型项目 它对常用库有几个依赖项 例如 openssl zlib 等 它在我的机器上编译得很好 现在是时候将它呈现给世界了 本质上是构建最好的工程 我想制作适用于 Windows

  • 当所有其他列都保证相同时，仅从 CSV 文件中读取选定的列

    我有一堆 CSV 文件 我试图将它们连接成一个 csv 文件 CSV 文件由一个空格分隔 如下所示 initial pos orientation ratio chr 106681 0 06 chr 106681 0 88 chr 1066

  • 选择 Haskell 解析器

    有很多开源的解析器实现 http hackage haskell org packages archive pkg list html cat parsing我们可以在 Haskell 中使用 Parsec http hackage has

  • 编辑就地 Swing 组件

    有谁知道 Swing 组件本质上是电子表格 允许就地编辑并且可以 以某种方式 绑定到数组 如果您不需要任何花哨的东西 您可以使用标准秋千JTable 参见例如here http download oracle com javase tuto

  • 子视图图层变换和布局Subviews

    我的问题与 UIView CALayer 变换触发超级视图中的layoutSubviews https stackoverflow com questions 24632876 uiview calayer transform trigge

  • 需要使 PowerShell 脚本更快

    我自学了 Powershell 所以我不知道它的一切 我需要搜索一个数据库 其中包含我输入的确切行数 数据库是预定义的 它包含 gt 11800 个条目 您能帮我找出是什么原因导致速度变慢吗 Code Dict Get Content C

  • 为什么 Selenium 有时会以安全模式启动 Firefox（用户无需按 Shift 键）？

    我正在使用 Firefox Selenium Web 驱动程序在专用测试机上运行自动测试 因此没有人按 Shift 键会导致 Firefox 以安全模式启动 但 Firefox 每天仍会多次启动此安全模式对话框 知道什么可能导致这种行为吗

  • 是否可以使用 opencv 将旋转图像复制到另一个图像的旋转矩形 ROI 中？

    好吧 很抱歉再次问几乎相同的问题 但我已经尝试了很多方法 但我仍然无法做我想做的事情 我什至不确定单独使用 opencv 是否可行 我旋转了一个图像 我想将其复制到另一个图像中 问题是 无论我以何种方式裁剪这个旋转图像 它总是复制到第二个图

  • Angular-material - 更改 md-select 多个选项中的分隔符

    我的表单中有一个 md select 其中包含多个选项 与Angular Material 站点中的演示 https material angularjs org latest demo select 它在其输入字段中显示以逗号分隔的选定选

  • ResolveUrl 无法内联工作

    我在 asp net 4 0 中收到以下代码的错误 错误消息 CS1525 无效的表达式术语 我在 Site Master 的 head 标签中使用此代码 你不能使用 gt EDIT如果您收到一条错误消息 The Controls coll

  • 按键值对字典数组进行排序

    我有一个字典数组 我想按每个字典中的 itemName 键按字母顺序对它们进行排序 我怎样才能在斯威夫特做到这一点 我想对项目数组进行排序 let array PFUser currentUser objectForKey Collecti

  • 使用（现在默认）Ember Data JSON-API 适配器处理错误

    我使用的是 Ember 1 13 7 和 Ember Data 1 13 8 它们默认使用 JSON API 标准来格式化发送到 API 和从 API 接收的有效负载 我想使用 Ember Data 的内置错误处理来向用户显示红色 错误 表

  • 如何在应用程序级别设置react-router的基本url？

    我有一个使用 create react app 创建的应用程序 我想将其安装在我网站的子目录中 推荐的方法是添加process env PUBLIC URL作为基本网址 IE

热门标签