开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我点击react路由器时，什么也没有发生

当您点击React路由器时，如果什么也没有发生，可能有以下几种可能的情况：

路由配置错误：您需要确保您的路由配置正确。请检查您是否正确定义了路由和对应的组件，并确保在正确的位置渲染了路由组件。
路由未正确匹配：React路由器使用路由匹配规则来确定要渲染的组件。您需要确保当前的URL与您定义的路由规则匹配。如果路由未匹配到任何规则，可能会导致什么也没有发生。
React组件未正确渲染：如果路由匹配成功，但仍然没有显示任何内容，可能是由于组件未正确渲染引起的。您可以检查组件的渲染方法，并确保您的组件正确地返回了要显示的内容。

总之，当您点击React路由器时什么也没有发生，很可能是由于路由配置错误、路由未正确匹配或组件未正确渲染所导致的。您可以仔细检查并逐步排除这些问题，以确保路由器正常工作。

关于React路由器的更多信息和相关产品推荐，您可以参考腾讯云提供的文档和产品介绍：

React Router官方文档：https://reactrouter.com/
腾讯云云服务器（CVM）：腾讯云提供的可弹性伸缩、安全稳定的云服务器产品，适用于部署Web应用和后端服务等场景。详情请参考腾讯云云服务器产品介绍
腾讯云Serverless Cloud Function（SCF）：腾讯云提供的无服务器云函数产品，可以帮助您快速搭建和部署无服务器应用。详情请参考腾讯云Serverless Cloud Function产品介绍
腾讯云容器服务（TKE）：腾讯云提供的基于Kubernetes的容器服务，可帮助您轻松管理和运行容器化应用。详情请参考腾讯云容器服务产品介绍

相关搜索:jQuery不工作。当我单击表单上的提交按钮时，什么也没有发生 React -当我们点击img时更改视图为什么当我点击onclick按钮时没有任何反应？为什么当我点击按钮时，它的样式会发生变化？为什么当我点击按钮时，我的数据没有进入MySQL数据库，也没有提交？为什么当我点击目标时，下拉列表仍然消失？为什么当我运行我的程序时什么也没有发生？在scala中运行delete查询时什么也没有发生在我的react钩子页面中单击Google Login按钮时，什么也没有发生当我们不使用任何参数(在React钩子中)时，会发生什么情况？

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

go: 当我们在使用sync.Map时，发生了什么

这里准备写一篇文章，讨论下当使用sync.Map执行操作的时候，会发生什么。 map结构代码很简单，sync/map.go中一百多行。...总体讲一讲Load, Store, Delete三个接口发生了什么。...m.read.Store(readOnly{m: m.dirty}) m.dirty = nil m.misses = 0 } store key: 4 存入一个不存在的key，非常有意思的事情会发生...m.dirty[key] = e } 为什么read中存在值为expunged的key时，这个时候dirty map一定不为nil呢。 1.

9486 0

2018-11-23 当我们输入一条 SQL 查询语句时，发生了什么？

比如，你有个最简单的表，表里只有一个 ID 字段，在执行下面这个查询语句时： 复制代码 mysql> select * from T where ID=10；我们看到的只是输入一条语句，返回一个结果...这样当我们碰到 MySQL 的一些异常或者问题时，就能够直戳本质，更为快速地定位并解决问题。...这个过程不需要重连和重新做权限验证，但是会将连接恢复到刚刚创建完时的状态。查询缓存连接建立完成后，你就可以执行 select 语句了。执行逻辑就会来到第二步：查询缓存。...你输入的是由多个字符串和空格组成的一条 SQL 语句，MySQL 需要识别出里面的字符串分别是什么，代表什么。 MySQL 从你输入的 "select" 这个关键字识别出来，这是一个查询语句。...优化器经过了分析器，MySQL 就知道你要做什么了。在开始执行之前，还要先经过优化器的处理。

7775 0

第二十一篇：从 React-Router 切入，系统学习前端路由解决方案

注：没有使用过 React-Router 的同学，可以点击这里完成快速上手。 1....div> Dashboard ); export default BasicExample; 这个 Demo 渲染出的页面效果如下图所示：当我点击不同的链接时...比如当我点击“About”链接时，就会展示 About 组件的内容，效果如下图所示：注意，点击 About 后，界面中发生变化的地方有两处（见下图标红处），除了 ul 元素的内容改变了之外，路由信息也改变了...因此学习 React Router，最要紧的是搞明白路由器的工作机制。 3. ...我们不妨回到故事的原点，再多问自己一个问题：为什么我们需要 React-Router？或者把这个问题稍微拔高一点：为什么我们需要前端路由？这一切的一切，都要从很久以前说起。 4.

4121 0

React 为什么重新渲染

本文只会介绍 React 为什么会发生更新，不会介绍如何避免「不必要」的更新（也许我会以这个为话题另外写一篇文章？）。...当我们点击按钮的时候，setCount 被调用、count 状态发生改变，React 更新了组件。...而当 React 更新一个组件时，也会更新这个组件下的所有子组件（至于为什么，很快就会讲的）。因此组件更新时，子组件也会更新。...); 当我们将组件的声明包裹在 memo 中时，我们实际上做的是告诉 React「嘿！...如果说，当一个组件由于状态改变而更新时，其所有子组件都要随之更新。那么当我们通过 Context 传递的状态发生改变时，订阅了这个 Context 的所有子组件都要更新也是毫不意外的了。

1.7K3 0

如何掌握高级react设计模式: Render Props【译】

上面的两个例子产生相同的结果，父组件简单地转换为 React.createElement() 调用，类型是我们的 Parent 组件，没有属性，也没有子项。 ?...当我们添加子组件时，请注意它本身如何转换为 React.createElement() 调用，上图这种格式创建了我们的 React 组件树。 ?...当调用该函数时，我们会得到完全相同的结果。 ? 那么上面的例子到底发生了什么呢？在最初的例子中，我们只是向下传递 'string'，将其放在 'div' 中并进行渲染。...更进一步的想象，我们还能用函数做些什么？我们可以在调用它们时传递参数： ? 我们花点时间来消化刚刚发生的事情。...这对我来说很可读; 让我们想想发生了什么。我们只是添加与子项相同效果的函数来代替添加 render 函数。让我们尝试与之前使用的示例组件对比一下： ?

1.5K3 0

如何掌握高级react设计模式: Render Props【译】

我们来看一个非常简单的例子：上面的两个例子产生相同的结果，父组件简单地转换为 React.createElement() 调用，类型是我们的 Parent 组件，没有属性，也没有子项。...当我们添加子组件时，请注意它本身如何转换为 React.createElement() 调用，上图这种格式创建了我们的 React 组件树。...当调用该函数时，我们会得到完全相同的结果。那么上面的例子到底发生了什么呢？在最初的例子中，我们只是向下传递 'string'，将其放在 'div' 中并进行渲染。...更进一步的想象，我们还能用函数做些什么？我们可以在调用它们时传递参数：我们花点时间来消化刚刚发生的事情。...这对我来说很可读; 让我们想想发生了什么。我们只是添加与子项相同效果的函数来代替添加 render 函数。

9122 0

React 入门学习（十）-- React 路由

什么是路由？...，在上面我们写了两组路由，同时还会报错指示我们需要添加 Router 来解决错误，这就是需要我们添加路由器来管理路由，如果我们在 Link 和 Route 中分别用路由器管理，那这样是实现不了的，只有在一个路由器的管理下才能进行页面的跳转工作...因此我们也可以在 Link 和 Route 标签的外层标签采用 BrowserRouter 包裹，但是这样当我们的路由过多时，我们要不停的更改标签包裹的位置，因此我们可以这么做我们回到 App.jsx...在前面的 demo 展示中，你可能会发现点击的按钮并没有出现高亮的效果，正常情况下我们给标签多添加一个 active 的类就可以实现高亮的效果而 NavLink 标签正可以帮助我们实现这一步当我们选中某个...非常感谢您的阅读，欢迎提出你的意见，有什么问题欢迎指出，谢谢！

1.8K1 0

React 入门学习（十）-- React 路由

什么是路由？...，在上面我们写了两组路由，同时还会报错指示我们需要添加 Router 来解决错误，这就是需要我们添加路由器来管理路由，如果我们在 Link 和 Route 中分别用路由器管理，那这样是实现不了的，只有在一个路由器的管理下才能进行页面的跳转工作...因此我们也可以在 Link 和 Route 标签的外层标签采用 BrowserRouter 包裹，但是这样当我们的路由过多时，我们要不停的更改标签包裹的位置，因此我们可以这么做我们回到 App.jsx...在前面的 demo 展示中，你可能会发现点击的按钮并没有出现高亮的效果，正常情况下我们给标签多添加一个 active 的类就可以实现高亮的效果而 NavLink 标签正可以帮助我们实现这一步当我们选中某个...非常感谢您的阅读，欢迎提出你的意见，有什么问题欢迎指出，谢谢！

1.7K1 0

Hooks与事件绑定

另外有一点我们需要明确一下，当我们点击了这个count按钮，React帮我们做了什么。...其实对于当前这个组件而言，当我们点击了按钮，那么肯定就是需要刷新视图，React的策略是会重新执行这个函数，由此来获得返回的JSX，然后就是常说的diff等流程，最后才会去渲染...那么为什么会出现这个情况呢，其实这就是所谓的React Hooks闭包陷阱了，其实我们上边也说了为什么会发生这个问题，我们再重新看一下，Hooks实际上无非就是个函数，React通过内置的use为函数赋予了特殊的意义...此时就需要将这个函数的地址保持为唯一的，那么就需要useCallback这个Hook了，当使用React中的useCallback Hook时，其将返回一个memoized记忆化的回调函数，这个回调函数只有在其依赖项发生变化时才会重新创建...那么看起来似乎并没有什么问题，但是当我们实际去应用的时候，会发现当text这个状态发生变化的时候，同样会触发这个post函数的执行，这是个并不明显的问题，如果text这个状态改变的频率很低的话，甚至在回归的过程中都可能无法发现这个问题

1.8K3 0

【react】利用shouldComponentUpdate钩子函数优化react性能以及引入immutable库的必要性

凡是参阅过react官方英文文档的童鞋大体上都能知道对于一个组件来说，其state的改变（调用this.setState()方法）以及从父组件接受的props发生变化时，会导致组件重渲染，正所谓"学而不思则罔...如果setState()中参数还是原来没有发生任何变化的state呢？ 2.如果组件的state没有变化，并且从父组件接受的props也没有变化，那它就一定不会重渲染吗？...控制台输出：（我点击了1一共15次 _(:3 」∠)_） ? 那么问题就来了，我的UI明明就没有任何变化啊，为什么要做着中多余的重渲染的工作呢？把这工作给去掉吧！ ?...点击1后： ? 控制台输出： ? demo如我们设想，但这里有一个我们无法满意的问题：输出的（1，1，2），有我们从0变到1的数据，也有未发生变化的1和2。...这说明Son又做了两次多余的重渲染，但是对于1和2来说，它们本身state没有变化（也没有设state）,同时父组件传达的props也没有变化，所以我们又做了无用功。 ? 那怎么避免这个问题呢？

1.3K12 0

react-03

SPA应用单页Web应用（single page web application，SPA）整个应用只有一个完整的页面点击页面中的链接不会刷新页面, 本身也不会向服务器发请求当点击链接时, 只会做页面的局部更新...什么是路由? 一个路由就是一个映射关系(key:value) key为路由路径, value可能是function/component 2....相关API 1). react-router中的相关组件: Router: 路由器组件, 用来包含各个路由组件 Route: 路由组件, 注册路由 IndexRoute: 默认子路由组件 hashHistory...: 路由的切换由URL的hash变化决定，即URL的#部分发生变化 Link: 路由链接组件 2)....Router: 路由器组件属性: history={hashHistory} 用来监听浏览器地址栏的变化, 并将URL解析成一个地址对象，供React Router匹配子组件: Route 3).

2.4K3 0

第二十二篇：思路拓展：如何打造高性能的 React 应用？

在 React 中，只要父组件发生了更新，那么所有的子组件都会被无条件更新。这就导致了 ChildB 的 props 尽管没有发生任何变化，它本身也没有任何需要被更新的点，却还是会走一遍更新流程。...在 shouldComponentUpdate 的加持下，当我们再次点击左侧按钮，试图修改 ChildA 的渲染内容时，控制台的输出就会变成下图这样：我们看到，控制台中现在只有 ChildA 的 re-render...函数组件的性能优化：React.memo 和 useMemo 以上咱们讨论的都是类组件的优化思路。那么在函数组件中，有没有什么通用的手段可以阻止“过度 re-render”的发生呢？...这里的 areEqual 函数是一个可选参数，当我们不传入 areEqual 时，React.memo 也可以工作，此时它的作用就类似于 PureComponent－React.memo 会自动为你的组件执行...当我点击右边的按钮时，只有 count 数字会发生变化。

3992 0

一篇文章告诉你React里为什么不能用index作为key

之前在写react的时候，当我们做map循环的时候,当我们没有一个唯一id来标识每一项item的时候，我们可能会选择使用index data.map((item, index) => { return...index作为key的时候，点击reverse会发现，input输入框还是1，2，3顺序显示，但是这并不符合我们的预期，控制台中此时打印的也是update；当我们用对象中的id作为key的时候，点击...reverse，此时神奇的事情发生了，input输入框变成了3，2，1，符合我们的预期，控制台此时打印的也是update；为什么会这样呢？...当我们传入index作为key时，此时的key为0，1，2，当我们点击reverse重新排序后，index传进去的key还是0，1，2，此时react比较key=0时，发现只需要更新子节点的值就可以...，于是只把item替换成了cc，而input则相反，当我们传入id作为index的时候，，点击reverse后，此时的key变成了3，2，1，根据react的diff算法，react还是能分辨出只需要移动子节点即可完成更新

1.2K4 0

分享一个自由拖拽组件的实现思路

点击上方关注前端技术江湖，我们一起学习，天天进步最近的项目中遇到一个需求，在页面上添加一个可以自由拖拽、缩放、编辑颜色的 svg 图片，项目中引用了两个现有的插件，对插件进行解读之后略有心得，与大家分享一下...自由拖拽缩放的节点 —— react-rnd 说到拖拽，我们的第一反应当然是监听鼠标事件来修改 dom 元素的位置，而缩放的话，则是在对元素边界进行操作时重新修正元素的 position 和 width...现在我们的 svg 终于可以自由缩放了，但是很快我们又发现，把一个 svg 放大之后，它的线条宽度也跟着变宽了，那么有没有什么属性来保持线条宽度不变呢？...尽管从宿主坐标空间发生任何变换更改，该用户坐标系的旋转和倾斜仍被抑制。但是，它没有指定抑制缩放。同样，它也没有指定用户坐标系的原点。...当我们设置vector-effect="non-scaling-stroke"后，我们的svg终于看起来正常了~ ?

2.2K4 0

一个被小瞧的冷门 hook 补全了 React 19 异步最佳实践的最后一环

1、遇到了一个问题如图所示，在之前的案例中，我想要实现这样一个功能：当我快速在输入框中输入内容时，我希望请求能自动发生，并且请求发生时，之前存在的列表不能被替换为 Loading 组件。...例如在上面的例子中，当我快速点击按钮递增时，Expensive 组件不会依次递增。效果如下我们发现，Expensive 组件的渲染直接从 0 变成了 7....但是此时我们也发现另外一个情况，那就是 counter 直接对应的高优先级执行也没有那么流畅，这是为什么呢？其实很简单，因为在我们的模拟案例中，并没有把耗时定位在渲染上。这可能和实践情况会不太一样。...当我快速点击时，执行效果如下此时一个很明显的区别就是，counter 的 UI 变化变得更加流畅了。...== deferred} /> 这里我们将 api 做为 state，当 api 被重新赋值时，List 会经历两次更新。首先点击事件触发，请求立即发生。api 被改变。

1881 0

React-利用React-Profiler提升应用性能

但如果在某次提交中，某个组件根本没有被渲染，会发生什么情况呢？我们选择第四次commit的情况来分析。 App和Header组件在过滤时不会改变，所以它们只在第一次commit时被渲染一次。...展示单个组件的渲染信息当你在某个图表区域中点击一个组件（放大它）时，「提交信息面板」会显示这个组件的细节。...放大后为我们提供了有用的信息--该item被重新渲染，因为它的props中value属性发生变化了。为什么值会改变？因为，每次我们过滤列表时都会创建一个新的数组。...然而，在第二次渲染时，当我们从数组中过滤掉一些值时，第一个item可能是不同的。...React 会重新使用第一次渲染时的key=1的组件，但由于第一个item本身发生了变化，其内部包含的信息也发生了变化，因此要重新渲染。

1.9K1 0

React 并发模式到底是个啥？

首先，React 设计了一个调度器，Scheduler，来调度任务的优先级。但是在争取谁更先渲染这个事情，在浏览器的渲染原理里，他经不起推敲。为什么呢？...只有在渲染超大量的 DOM 和大量表单时，浏览器的渲染引擎表示有压力因此，资源竞争只会发生在，渲染能力不够用的时候。...那么也就意味着，React 的并发只会发生在第一个部分：JS 逻辑中。因此，react 还设计了第二步骤，Reconciler。...当我们通过 setState 触发一个渲染任务时，react 需要在 Reconciler 中，利用 diff 算法找出来哪些 DOM 需要被更改。...例如上面例子，当我们使用 StartTransition 标记了 setTab 为一个耗时较长的任务时。

2411 0

【19】进大厂必须掌握的面试题-50个React面试

更新阶段：组件添加到DOM后，只有在更改属性或属性时，它才有可能更新和重新渲染。那只发生在这个阶段。卸载阶段：这是组件生命周期的最后阶段，在该阶段中，组件被销毁并从DOM中删除。...当我们需要DOM测量或向组件添加方法时，它们会派上用场。...这对于初始渲染非常有用，并在优化应用程序性能时提供了更好的用户体验。开发人员工具–从操作到状态更改，开发人员可以实时跟踪应用程序中发生的所有事情。...React Router有一个简单的API。 47.为什么在React Router v4中使用switch关键字？尽管用于在路由器内部封装多个路由。...48.为什么我们在React中需要一个Router？ 路由器用于定义多个路由，并且当用户键入特定的URL时，如果此URL与路由器内部定义的任何“路由”的路径匹配，则用户将被重定向到该特定的路由。

11.2K3 0

快速了解 React Hooks 原理

以下 OneTimeButton 是函数组件，所做的事情就是当我们点击的时候调用 sayHi 方法。...，如果被点击了，禁用按钮，就像一次性开关一样。...现在，你应该有很多疑问，如：当组件重新渲染时，每次都不会重新创建新的状态吗？ React如何知道旧状态是什么？为什么hook 名称必须以“use”开头？这看起来很可疑。...下一次渲染会发生什么？ React需要重新渲染组件, 由于 React 之前已经看过这个组件，它已经有了元数据关联。 React将nextHook索引重置为0，并调用组件。...第三次调用useState，我想你知道现在发生了什么。就是这样了，知道了原理，看起来也就不那么神奇了，但它确实依赖于一些规则，所以才有使用 Hooks 规则。

1.3K1 0

通俗易懂的React事件系统工作原理

button>我们已经知道这个onClick只是一个合成事件而不是原生事件，那这段时间究竟发生了什么？...React 并没有将我们业务逻辑里的listener绑在原生事件上，也没有去维护一个类似eventlistenermap的东西存放我们的listener。...由 3，4 条规则可以得出，我们业务逻辑的listener和实际 DOM 事件压根就没关系，React 只是会确保这个原生事件能够被它自己捕捉到，后续由 React 来派发我们的事件回调，当我们页面发生较大的切换时候...图片从点击的原生事件中找到对应 DOM 节点，从 DOM 节点中找到一个最近的React组件实例，从而找到了一条由这个实例父节点不断向上组成的链，这个链就是我们要触发合成事件的链，(只包含原生类型组件...React onClick/onClickCapture，实际上都发生在原生事件的冒泡阶段。

1.5K0 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭