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

在React-Router V4中以编程方式设置路由参数时,结果是“找不到页面”

在React-Router V4中,可以通过编程方式设置路由参数来实现页面跳转和参数传递。当设置路由参数时,如果出现“找不到页面”的错误,可能是由于以下几个原因:

  1. 路由路径设置错误:首先要确保设置的路由路径是正确的。在React-Router V4中,可以使用动态路由参数来匹配不同的路径。例如,如果要设置一个带有参数的路由路径,可以使用<Route path="/users/:id" component={User} />的形式,其中:id表示参数部分。在编程方式设置路由参数时,需要确保设置的路径与路由配置中的路径一致。
  2. 路由参数传递错误:在编程方式设置路由参数时,需要使用history.pushhistory.replace方法来进行页面跳转,并传递参数。例如,可以使用history.push('/users/' + userId)来跳转到指定的用户页面,并传递userId作为参数。如果参数传递错误或未传递参数,可能导致页面找不到。
  3. 路由组件未正确接收参数:在目标路由组件中,需要正确接收和处理传递的参数。可以通过this.props.match.params来获取路由参数。例如,在上述的例子中,可以通过this.props.match.params.id来获取id参数的值。如果未正确接收参数或处理参数,可能导致页面找不到。

综上所述,当在React-Router V4中以编程方式设置路由参数时,需要确保路由路径设置正确、参数传递正确,并在目标路由组件中正确接收和处理参数。如果仍然出现“找不到页面”的错误,可以进一步检查路由配置和代码逻辑是否正确。

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

相关·内容

React 中的一些 Router 必备知识点

={App}/> ), document.getElementById('app')); 亦或是嵌套路由: 在 React-Router V4 版本之前可以直接嵌套,方法如下:...后续对比 React-Router 版本发现,是因为在 V4 版本中变更了其渲染逻辑,原因据说是为了践行 React 的组件化理念,不能让 Route 标签看起来只是一个标签(奇怪的知识又增加了)。...路由传参小 Tips 在实际开发中,往往在页面切换时需要传递一些参数,有些参数适合放在 Redux 中作为全局数据,或者通过上下文传递,比如业务的一些共享数据,但有些参数则适合放在 URL 中传递,比如页面类型或详情页中单据的唯一标识...在处理 URL 时,除了问号带参数的方式,React-Router 能帮我们做什么呢?在这其中,Route 组件的 path 属性便可用于指定路由的匹配规则。...Case C:查询参数隐身式带法 path="/book" path 依旧设计成既定的样子,而在跳转时,可以通过 Link 中的 state 将参数传递给对应路由的页面。

2.9K40

React 中的一些 Router 必备知识点

={App}/> ), document.getElementById('app')); 亦或是嵌套路由: 在 React-Router V4 版本之前可以直接嵌套,方法如下:...后续对比 React-Router 版本发现,是因为在 V4 版本中变更了其渲染逻辑,原因据说是为了践行 React 的组件化理念,不能让 Route 标签看起来只是一个标签(奇怪的知识又增加了)。...路由传参小 Tips 在实际开发中,往往在页面切换时需要传递一些参数,有些参数适合放在 Redux 中作为全局数据,或者通过上下文传递,比如业务的一些共享数据,但有些参数则适合放在 URL 中传递,比如页面类型或详情页中单据的唯一标识...在处理 URL 时,除了问号带参数的方式,React-Router 能帮我们做什么呢?在这其中,Route 组件的 path 属性便可用于指定路由的匹配规则。...Case C:查询参数隐身式带法 path="/book" path 依旧设计成既定的样子,而在跳转时,可以通过 Link 中的 state 将参数传递给对应路由的页面。

2.7K20
  • React Router5 感性认知

    如果已经在使用4.x版本,则可以在零代码更改的情况下立即使用版本5。v5中最显着的改进是对React 16的全面支持,同时保持了与React> = 15的完全兼容性。...可能你已经用惯了v3的开发方式,一时难以转变,但是任何新事物的诞生必然有他的理由,当我用过 v5之后,不得不说真的很方便,变得更简单,更灵活。...下面简单的说下从 v4 开始的一些重大的改进 分包 v4 之前只有一个库 react-router。...从 v4开始分为了两个库 react-router 核心库 react-router-dom 用来操作 DOM 当然还有react-router-native 这可以理解成在架构上做了一些调整,通用的和平台无关的能力放在一个库...,布局和页面组件是独立的,所有组件都只是路由的一个参数。

    1.5K10

    React Router v4教程:为你的 React 应用创建路由

    React 中的路由 React Router v4 的优点 常规路由 通常,当用户在浏览器中键入 URL 时,会向服务器发送 HTTP 请求,然后服务器检索 HTML 页面。...网站介绍的详细信息可以在“关于我们”页面上找到,用户列表及其详细信息会出现在不同的页面上,可能还有其他各种页面包含很多不同的视图。 那么你认为这是怎样实现的呢?在程序中添加路由器可以解决这一需求。...在 React 中,路由查看每个组件的历史记录,当历史记录发生任何变化时,组件会重新渲染。在 Router v4 之前,我们必须手动设置 History 的值。...Link Link 用于在程序中的内部路由之间导航。它相当于锚标签: 。 Link 传递一个字符串参数 to,其中指定了 URL 的路径。...这是 React Router v4 声明 性质的一个的例子。 v4 中的路由为 inclusive 意味着可以同时呈现多个路由。我们使用 exact 属性来解决多匹配中的问题。

    2K20

    TS+React+Router+Mobx+Koa打造全栈应用

    如果登录了则渲染路由包裹后的组件否则重定向到登陆页面。这里路由跳转的逻辑和组件耦合起来了。相比较vue-router,vue则提供了导航钩子的,能够在每个路由跳转的时候判断有无登录权限。...这个功能在老版本的router中是存在的,v4以后就被移除了。...v4版本没有办法在一个地方映射所有的route,必须到页面内部使用组件包裹 编程式导航 我不喜欢在页面中写很多的导航标签,因为觉得这样不够灵活,偏爱编程式导航。...在react-router中,路由有hashrouter和historyrouter两种(只讨论web相关,还有额外的native和memory路由)。...我们知道使用事件委托要比在每一个元素上都绑定了事件监听器要好很多,在vue中,我们给v-for渲染出来的组件绑定事件监听器时,文档已经指出帮我们做了关于委托的优化。

    1.8K70

    React-Router 基础学习

    React-Router学习 声明式导航: 声明式导航是指通过在模板中通过 组件描述出要跳转到哪里去,比如后台管理系统的左侧菜单通过使用这种方式进行  ... 语法说明: 通过给组件的to属性指定要跳转到路由path, 组件会被渲染位浏览器支持的a链接,如果需要传参直接 通过字符串拼接的方式拼接参数即可 编程式导航 编程式导航是通过useNavigate...钩子得到导航方法, 然后通过调用方法以命令式的形式进行路由跳转 比如: 想在登录请求完毕之后,跳转到首页面,就可以选择这种方式,更加灵活  import { useNavigate } from "react-router-dom...>跳转到文章页面 导航传参 1. useSearchParams 传参 传递参数 以及目标路由接收参数的方式 传递参数  {/* 带参导航路由 */}  <button onClick...场景: 当浏览器输入的url路径在整个路由表里面找不到对应的path的下 为了优化用户体验,可以使用404兜底组件进行渲染 实现步骤: 准备一个NotFound组件 在路由表数组的末尾,以* 号作为路由的

    8810

    React Router3到5 升级小记

    组件渲染方式1 component 属性和 v3 中的 component 属性保持一致,表示path匹配的时候才会渲染的组件。...组件渲染方式2 增加了render属性,v3中不存在这个属性,render 表示在path匹配时被调用的方法,而不是创建一个组件,但是需要一个返回值,返回一个组件或者null。...3 新增children属性,children 与 render 一样,但是不会匹配地址,路径不匹配时 URL的match 值为 null,可以用来根据路由是否匹配动态调整UI。...Route 监控事件移除 在v3中,可以使用使用 Route的 onEnter, onUpdate和 onLeave事件来做一些事情。...在v4 5中,Route的这些事件没了,不过我还没用到这些事件,只是简单的提一句。 按需加载 v3 里实现组件按需加载还是很方便的,因为提供了特定的方法。

    2.3K20

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

    React组件设计实践总结04 - 组件的思维 Bobi.ink 2019-05-15 在 React 的世界里”一切都是组件“, 组件可以映射作函数式编程中的函数...React-router: URL 即状态 11. 组件规范 扩展 ---- 1. 高阶组件 在很长一段时期里,高阶组件都是增强和组合 React 组件的最流行的方式....传统的路由主要用于区分页面, 所以一开始前端路由设计也像后端路由(也称为静态路由)一样, 使用对象配置方式, 给不同的 url 分配不同的页面组件, 当应用启动时, 在路由配置表中查找匹配 URL 的组件并渲染出来...React-Router v4 算是一个真正意义上符合组件化思维的路由库, React-Router 官方称之为‘动态路由’, 官方的解释是”指的是在应用程序渲染时发生的路由,而不是在运行应用程序之外的配置或约定中发生的路由...这种方式更加灵活, 所以选择 v4 不代表放弃旧的路由方式, 你完全可以按照旧的方式来实现页面路由.

    2.3K20

    深入浅出解析React Router 源码

    在分享学习的过程中,自己对前端路由也产生了一些思考和见解,所以写就本文,和大家分享我对前端路由的理解。...,并提示找不到跳转页面,这也是意料之中的行为,因为 a 标签的默认行为就是跳转页面,我们在跳转的路径下没有对应的网页文件,就会提示错误。...到这里,我们基本上了解了hash 和history 两种前端路由模式的区别和实现原理,总的来说,两者实现的原理虽然不同,但目标基本一致,都是在不刷新页面的前提下,监听和匹配路由的变化,并根据路由匹配渲染页面内容...此外在原生实现中,我们还忽略了路由嵌套的情况,我们其实只在根节点绑定了监听事件,没有考虑子组件的路由,而在 React Router 中,通过context的方式,将路由信息传递给其子孙组件...在当下这波前端技术的滔滔浪潮中,前端路由,也还会在前端er的不断迭代中, 继续摸索和前进, 在更广阔的场景上, 去发挥它的价值。

    3K10

    react+redux+webpack教程4

    现在我们要通过路由进入一个新的页面来查看新闻详细内容。 react和路由并没有什么直接关系,用什么路由都可以。不过使用react-router可以让我们的代码风格统一, 并且有些工具使用起来很方便。...browserHistory就是我们最熟悉的浏览器管理历史, 使用这种历史管理方式感觉上跟普通浏览网页的方式一样:url路径会随着跳转及前进、后退按钮而变化, 但是在react-router的browserHistory...hashHsitory只控制url中#号后面的部分,这是前一段时间单页应用比较通用的方式,但是随着HTML5的普及, 这个方式有逐渐被淘汰的趋势。这里我们使用browserHistory。...: componentWillMount(){ // 在react-router的帮助下,我们可以很轻松地拿到url路径上的参数id this.props.dispatch(fetchNewsDetail...我们可以加一个默认页面,就是在访问某一级带有子路径路由时,可以给它一个对应到这个路径的页面,不一定是跟路径哦。

    1.8K100

    react-router-middleware-plus开源啦 | 基于react-router v6的零成本式路由权限解决方案

    一、你的苦恼~~ 你还在为react-router的路由权限控制而烦恼吗? 你还在翻遍了社区react路由权限相关文章发现都是V4、V5版本的而烦恼吗?...element: }, ] middleware: midleware定义为中间件的概念,是包含了一个或多个用户自定义的auth callback的数组,在页面路由加载时...如果你想拦截路由在auth callback中直接返回false即可,如果允许通过返回true即可。...,与react-router-dom是一致的,只是新增了middleware参数,可选 // middleware中的鉴权逻辑callback,是从左向右依次调用的,遇到第一个返回false的callback...就通过配置middleware,灵活搭配组合callback,在callback中自定义处理逻辑,路由权限处理问题解决了 四、Props介绍 react-router-middleware-plus在使用时和

    1.7K30

    【路由】:history——ReactRouter vs VueRouter

    这篇文章分析一下浏览器原生的历史管理、react-router 中的历史管理,以及vue-router 中的历史管理。给大家直观展示一下两大主流框架(React、Vue)在路由管理方面的异同。 2...., null, callback); // true console.log("\n----Test2----\n"); // Test 2 // 设置 string 类型 prompt 时,需要配合...正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。...接着我们调用resolveQueue方法,resolveQueue接受当前的路由和目标的路由的matched属性作为参数,resolveQueue的工作方式可以如下图所示。...将queue队列中每一个元素传入fn(迭代器iterator)中,在迭代器中会执行路由守卫,并且路由守卫中必须明确的调用next方法才会进入下一个管道,进入下一次迭代。

    1.6K20

    React 进阶 - React Router

    ,也需要容器组件通过路由更新,来渲染视图 在 History 核心基础上,增加了 Router ,Switch ,Route 等组件来处理视图渲染 React-Router-DOM 在 React-Router...基础上,增加了一些 UI 层面的拓展比如 Link ,NavLink 在 React-Router 基础上,增加了两种模式的根部路由 BrowserRouter ,HashRouter # history...属性获取和设置 hash 值 在哈希路由模式下的应用中,切换路由,本质上是改变 window.location.hash 监听路由 hashchange window.addEventListener...props 中,但是无法传递父组件中的信息 render 形式:Route 组件的 render 属性,可以接受一个渲染函数,函数参数就是路由信息,可以传递给页面组件,还可以混入父组件信息 children...Route 进行渲染 通过 Switch 包裹后,那么页面上只会展示一个正确匹配的路由 Redirect Redirect 可以在路由不匹配情况下跳转指定某一路由,适合路由不匹配或权限路由的情况 注意

    1.9K21

    关于各方面 杂七杂八的一些内容

    中使用, 参数:from:表示来自于什么链接,也就是当链接是redirect时, 我们触发跳转命令,to:表示要跳转到的链接,这里是跳转到Jspangb的组件中。...id=33#toc29 11. react-route-5种路由方式: (1)BrowserRouter:浏览器的路由方式,也是我们一直在学习的路由方式,在开发中最常使用。...(2)HashRouter:在路径前加入#号成为一个哈希值。Hash模式的好处是,再也不会因为我们刷新而找不到我们的对应路径了。...(5)StaticRouter:设置静态路由,需要和后台服务器配合设置,比如设置服务端渲染时使用。 文档:https://www.jspang.com/detailed?...可以在action中实现对路由的操作。 每次路径发生变化时可以把最新的路径放到仓库里面,以便随时在仓库中获取。

    2K10
    领券