首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

React-Router-Bootstrap <LinkContainer>错误:您不应该在<Router> - Gatsby问题之外使用<withRouter(LinkContainer) />?

React-Router-Bootstrap是一个用于React应用程序的库,它结合了React-Router和Bootstrap框架的功能。它提供了一组React组件,用于在应用程序中创建导航链接和路由。

在React-Router-Bootstrap中,<LinkContainer>组件用于将Bootstrap的导航链接与React-Router的路由链接起来。它允许您在导航链接上使用React-Router的功能,例如在用户点击链接时进行路由导航。

然而,根据提供的问答内容,错误是在<Router> - Gatsby问题之外使用<withRouter(LinkContainer) />。这是因为在Gatsby应用程序中,<Router>组件已经被Gatsby自动处理,您不应该在其之外再次使用<withRouter>高阶组件。

解决这个错误的方法是,确保您只在<Router>组件内部使用<withRouter(LinkContainer) />,而不是在其之外。这样可以确保React-Router-Bootstrap与Gatsby应用程序的路由系统正常配合工作。

关于React-Router-Bootstrap的更多信息和使用示例,您可以参考腾讯云的React-Router-Bootstrap产品介绍页面:React-Router-Bootstrap产品介绍

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

2020 年你应该知道的 React 库

样板文件应该是最小的,不要试图解决所有问题。它应该针对你的问题。...使用 PropTypes,你可以为你的 React 组件定义传入的 props。无论何时向组件传递了错误的类型,在运行应用程序时都会收到错误消息。但是这种形式的类型检查只应该用于较小的应用程序。...当使用这样的类型检查器时,您可以在开发期间获得错误您不必启动应用程序就可以找到本可以通过这种类型检查防止的 bug。这样一来,类型检查器就可以提高您的开发人员体验,避免首先引入 bug。...通常的方法是使用自定义身份验证实现自己的自定义后端应用程序。如果您不想启动自己的身份验证,可以考虑类似 Passport.js 的东西。...您可以从小型开始,只添加库来解决特定的问题。当应用程序增长时,您可以沿途扩展构建块。否则你可以通过使用普通的 React 来保持轻量级。

14.4K40

React 进阶 - 高阶组件

# 高阶组件 # 解决什么问题 HOC 的产生根本作用就是解决大量的代码复用,逻辑复用问题。...为了让组件也可以获取到路由对象,进行路由跳转等操作,所以 React Router 提供了类似 withRouter 的 HOC 。...# 不要在函数组件内部或类组件 render 函数中使用 HOC 类组件错误写法: class Index extends React.Component { render () { const...比如 HOC1 依赖 HOC2 ,那么 HOC1 应该在 HOC2 内部 如果想通过 HOC 方式给原始组件添加一些额外生命周期,因为涉及到获取原始组件的实例 instance ,那么当前的 HOC 要离原始组件最近...WrapComponent; } 引入 hoist-non-react-statics 三方库 每个静态属性方法都手动绑定会很累,尤其对于开源的 HOC ,对原生组件的静态方法是未知 ,为了解决这个问题可以使用

54010

Watermill(Golang 事件驱动库)Message Router 解析

接下来,您必须使用 Router.AddHandler 添加新的处理程序: // ... // AddHandler 添加一个新的处理程序。 // // handlerName 必须唯一。...因此,您不必在处理消息后调用 msg.Ack() 或 msg.Nack() (当然,如果您愿意,也可以这样做)。...如果这是一个问题,考虑使用每个处理程序只发布一条消息。 Running the Router 要运行 Router,你需要调用 run()。...// // 要停止 Run(),你应该在路由器上调用 Close()。 // // ctx 将传播给所有订阅者。 // // 当所有处理程序都停止时(例如:因为关闭连接),Run() 也将停止。...Ensuring that the Router is running 知道 router 是否在运行是很有用的。对此,您可以使用 Running() 方法。

1.6K20

「React进阶」react-router v6 通关指南

让我们开始今天的 router v6 学习之旅吧。 二 基本使用 首先我们从路由的使用方法上,来看一下 v6 的变化,还是举例一个场景。...withRouterwithRouter 是一个高阶组件 HOC ,因为默认只有被 Route 包裹的组件才能获取到路由状态,如果当前非路由组件想要获取状态,那么可以通过 withRouter 包裹来获取...在 v5.2.0 到新版本 v5 React-Router 中,除了用 RouterContext 保存状态之外,history 状态由 HistoryContext 单独保存。...2 v6 router 尝鲜 接下来我们使用 react-router v6 版本尝鲜。用 v6 实现上述功能。...如果是正常按照组件挂载方式处理,那么肯定会报错误,那么我们写的 是怎么处理的呢?

4.8K41

React组件设计实践总结04 - 组件的思维

最为常见的例子就是 redux 的connect和 react-routerwithRouter. 高阶组件最初用于取代 mixin(了解React Mixin 的前世今生)....注入 context 或外部状态和逻辑, 例如 redux 的 connnect, react-routerwithRouter....不推荐 const EnhancedComponent = withRouter(connect(commentSelector)(WrappedComponent)); // ✅ 使用compose...例如使用 useRouter 取代 withRouter, useSpring 取代旧的 Spring Render Props 组件 取代容器组件 状态管理器: use-global-hook, unstated...React-Router v4 算是一个真正意义上符合组件化思维的路由库, React-Router 官方称之为‘动态路由’, 官方的解释是”指的是在应用程序渲染时发生的路由,而不是在运行应用程序之外的配置或约定中发生的路由

2.2K20

如何用 Django 编写 Python web API【Programming(Python)】

在Stack Overflow上,Django大约有191,000个带标签的问题。 Spotify,YouTube和Instagram等网站都依赖Django进行应用程序和数据管理。...$ cd tutorial $ django-admin startapp quickstart Django使用数据库作为其后端,因此您应该在开始开发之前同步数据库。...响应可以是HTML,或者是HTTP重定向,或者是HTTP错误,JSON或XML文档,图像或TAR文件,或者可以从Internet获得的任何其他内容。...= routers.DefaultRouter() router.register(r'users', views.UserViewSet) router.register(r'groups',...您不必寻找外部工具,也不必担心第三方工具会引入兼容性问题。 用户,循环和条件的简单构造使您可以专注于编写代码。 这是一个成熟且经过优化的框架,非常快速且可靠。

2.1K00

React 项目结构和组件命名规范

我将会在本文为大家展示我已经使用过一段时间并且效果不错的方式,这些方式没有通过重新造轮子来实现,而是通过将社区中的方案组合和提炼得到。 目录结构 我经常遇到的一个问题是如何组织文件和目录结构。...请看下面的图片,以及描述的结构: image.png 在这篇文章中,我们只关注src目录,src 之外保持不变。...但是,还有一个问题:如何命名它们?...它涉及我们给类或定义组件的常量名称: class MyComponent extends Component { } const MyComponent () => {}; 如上所述,我们为组件提供的名称应该在应用程序中清晰且独特...当我们需要使用工具作为React Dev工具进行调试时,以及当应用程序中发生运行时错误时,组件的名称非常方便,错误总是与发生错误的组件名一起出现。

6.7K30

使用 Flask 和 Vue.js 来构建全栈单页应用

简单的来说,如果想在 Flask 中使用 Vue 框架是没有什么问题的。...但在实际中存在一个明显的问题就是 Flask 的模版引擎 Jija 和 Vue 一样使用双花括号来渲染, 对于 Jinja 模板和 Vue 的语法冲突问题,这里有一个很好的解决方案 (https://github.com...Flask 将抛出一个页面未找到的错误。 确实如此,因为我们在 vue-router使用了 HTML5 历史模式,我们需要去 配置我们的服务器 让所有路由跳转到 index.html....中的通配符,用以代表任何除了我们已经定义好的路由之外的其他情况。...保存文件,转到浏览器中,再次运行开发服务器,刷新 localhost:8080 然后… 您应该在控制台中看到一个错误,并且没有随机值。 但别担心,一切都正常。

3K10

Python | AioHttp 异步抓取火星图片

('/', get_mars_photo, name='mars_photo') 如果您不熟悉aiohttp,则可能需要说明以下几点: get_mars_photo协程是一个请求处理程序;它以HTTP请求作为唯一参数...,并负责返回HTTP响应(或引发异常) app是高级服务器;它支持路由器,中间件和信号(对于该程序,我们将仅使用路由器) app.router.add_get 在HTTP GET方法和'/'路径上注册请求处理程序...可以自动检测您的应用并支持实时重载: pip install aiohttp-devtools adev runserver -p 8080 nasa.py 现在如果您访问localhost:8080,则应该在浏览器中看到...使用NASA API 当然,这还没有结束。如果您是一位敏锐的观察者,您会注意到我们没有得到实际的图像,而是一些文本。现在让我们解决这个问题。 要从火星获取照片,我们将使用NASA API。...如果您发现错误或有任何疑问,请告诉我。

1K40

理解分布式系统的8个谬误

由于您不再等待响应,因此您需要更改系统中的用户行程。您不能只使用队列发送替换每个Web服务调用。 结论 你可能会说网络现在更可靠 - 而且它们是。但事情发生了。...这是一个经典的Select n + 1问题。为了解决网络延迟问题,您应该在一次调用中返回所有必需的数据。一般的建议是本地调用可以细粒度,但远程调用应该更粗粒度。...您不应该只使用远程调用替换本地呼叫。这可能会使你的系统变成分布式的大泥球。 3.带宽是无限的 问题 带宽是有限的。 带宽是网络在一段时间内发送数据的容量。...记录和监控 系统管理员应该拥有用于错误报告和管理问题的正确工具。你应该从一开始就考虑监控。分布式系统应具有集中式日志。访问十个不同服务器上的日志以调查问题是不可接受的方法。...隔离第三方依赖关系 您应该以不同于您拥有的组件的方式处理控制之外的系统。这意味着使您的系统更能适应第三方故障。您可以通过引入抽象层来减少外部依赖的影响。

2K20

AngularDart4.0 英雄之旅-教程-07路由 顶

添加路由 应该在用户点击按钮后显示英雄而不是自动显示。 换句话说,用户应该能够导航到英雄列表。 更新pubspec 使用Angular路由(angular_router)启用导航。...是PathLocationStrategy,所以在生产中,可以使用ROUTER_PROVIDERS,而不必使用LocationStrategy提供程序。...您不必告诉HeroesComponent或DashboardComponent任何东西。...在一个真正的应用程序中,您可以使用routerCanDeactivate()挂钩来防止此问题。 在CanDeactivate页面上阅读更多信息。  ...把它打包起来很容易,在其他地方重新使用组件。 您还可以在任何组件之外的应用程序级别创建样式。 设计师提供了一些基本样式来应用于整个应用程序的元素。 这些对应于您在安装期间先前安装的全套主样式。

17.5K30

如何在Ubuntu 14.04上保护Nginx

警告:在更新系统上的所有软件包之前,请务必确定这是否会导致除Nginx之外的系统上运行的任何问题。在执行一次影响这么多包的操作之前,最好先备份整个系统。如果在更新所有软件包后出现问题,您可以恢复备份。...接下来要做的是更改4xx(客户端)错误页面,攻击者可以使用这些错误页面。通常,这些是Unauthorized 401和Forbidden 403错误页面。...除非您正在调试问题,否则通常不需要向常规访问者显示这些错误。如果您需要了解这些错误,您仍然可以在Nginx错误日志(/var/log/nginx/error.log)中找到它们。...您不应该在Nginx中隐藏服务和调试信息,还应该在后端引擎(PHP,Tomcat等)中隐藏服务和调试信息,当然还应该隐藏在Web应用程序中。...要使这些设置生效,您必须使用以下命令重新加载Nginx: sudo service nginx reload 现在,如果您尝试使用/wp-admin/允许的IP地址范围之外的浏览器访问站点的某个部分,则会出现错误

1.6K20

如果您有全职工作,如何为Kubernetes做贡献

有时,问题可能贴错标签;也许问题的技术复杂性被低估了,并且被错误地标记为“good first issue”。因此,如果“good first issue”似乎比您预期的要复杂,请不要感到惊讶。...一旦您有了解决方案的想法,最好在提交PR之前,在Slack上与问题创建者联系以验证您的方法。如果您一周内未收到创作者的回音,请进行PR,以便该人员可以使用具体解决方案进行审查。...起初,我感到困惑的是,在就某个问题打电话给Dib之后,我应该在多久之后提交一份PR。由于我必须在全职工作之外从事 K8s 的工作,所以我也想知道这将如何影响我的工作与生活平衡。...在开发解决方案时,请确保添加单元测试或集成测试以确认该错误已修复或该功能按预期工作。...如果您不是Kubernetes项目的成员,CI作业将不会对你的PR自动运行测试任务。

1.4K80

UI自动化测试最佳实践(二)

但我们真的应该在所有浏览器上运行所有测试来验证这一点吗?当然不是。浏览器兼容性测试可以由一个有限的测试套件来执行,该测试套件具有与所有web元素交互的测试,并且至少执行一次所有的主工作流。...通过使用此配置,您不再需要关心web驱动程序配置。所有的东西都会自动安装,这样你就可以为其他工程师节省很多时间。...对于经典的断言,在测试执行之后,您只会注意到一个错误,然后测试就会失败。这意味着你的测试做得很好!它抓住了一个错误!但是,第二个问题呢?你怎样才能抓住另一个问题呢?是的,只有在第一个问题解决之后。...一旦测试执行完成,他们就会检查失败的测试,并验证所有的红色测试都是那些由于这些现有的错误或是否有一些新的问题而可能失败的测试。 不,再一次不!根据最佳实践,这不是正确的方法。...除此之外,它还为每个测试提供了非常详细的步骤说明,这在结果分析期间非常有用。我强烈推荐使用我们的测试自动化框架,它是使用Serenity框架开发的。现在,您自己尝试一下报告。

1.1K20

特征选择(Feature Selection)引言

R:有关使用Caret R软件包进行递归功能消除的方法,请参阅使用Caret R软件包进行功能选择 ” 选择功能时的陷阱 特征选择是应用机器学习过程的另一个关键部分,如模型选择,您不能一劳永逸。...如果您不这样做,您可能会无意中将偏差引入您的模型中,导致过度拟合。......应该在不同的数据集上进行特征选择,而不是在训练您的预测模型上进行特征选择......不这样做的效果是您会过度训练您的训练数据。...一个错误的做法是首先执行特征选择,然后准备数据,再对所选特征执行模型选择和训练。...如果是,则使用可变排序方法; 否则,无论如何,要获得基准的结果。 您需要预测吗?如果否,停止 您怀疑您的数据是“脏的”(有几个无意义的输入模式和/或噪声输出或错误的类标签)?

3.8K60

Istio如何同时实现Hytrix|Ribbon|Zuul|微服务安全的功能?:为微服务引入Istio服务网格(下)

现在,如果你打电话给你的客户服务端点,你应该在呼叫登录v2服务时遇到延迟: $ time curlcustomer-tutorial....您可以在Java代码中执行此操作,但是您将使用Istio。您将在推荐服务呼叫中注入瞬态HTTP 503错误。...您不希望多个请求排队或使该实例或pod更慢。所以,我们将添加一个断路器,只要有多个请求被任何实例或pod处理,就会打开。...使用Istio,这是一个相对简单的问题,因为istio-proxy拦截所有网络流量,因此它可以改变响应,包括响应所需的时间。 Istio容易注入的两个有趣的错误是HTTP错误代码和网络延迟。...5.1.HTTP错误 这个简单的概念允许您在系统内出现随机故障时探索整个系统的行为。在使用Istio的RouteRule构造时,抛出一些HTTP错误实际上非常简单。

2.2K30

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券