草庐IT

Lan-Router

全部标签

javascript - React Router v4 嵌套匹配参数无法在根级别访问

测试用例https://codesandbox.io/s/rr00y9w2wm重现步骤点击Topics点击RenderingwithReact或转到https://rr00y9w2wm.codesandbox.io/topics/rendering预期行为match.params.topicId应该与父Topics组件相同应该与match.params.topicId相同在主题组件中访问时实际行为match.params.topicId在Topic组件中访问时是undefinedmatch.params.topicId在Topics组件中访问时呈现我从thisclosedissue了解

javascript - AngularJS ui-router $state.go ('^' ) 仅更改地址栏中的 URL,但不加载 Controller

我正在尝试使用angularjsui-router创建一个“TodoApp”。它有2列:第1列:待办事项列表第2列:Todo详细信息或Todo编辑表单在保存Todo后的编辑和创建Controller中,我想重新加载列表以显示适当的更改。问题:在创建或更新Todo时调用$state.go('^')后,浏览器中的URL变回/api/todo,但是ListCtrl未被执行,即$scope.search未被调用,因此Todo列表(包含更改的项目)未被检索,第2列中第一个Todo的详细信息也未显示(而是,它变成空白)。我什至尝试过$state.go('^',$stateParams,{reloa

javascript - react.js - 处理固定页眉和页脚的 React-router

我有React-router风格的React.js应用程序,我对我当前的路由处理有疑问。设计如下,普通移动布局,固定页眉和页脚,内容在中间:如果它们是静态的,我可以简单地创建这样的结构:但偶尔它们会随着页面的变化而变化,例如:标题和按钮文本按钮数量某些页面上没有页脚将它们放在ViewController中并每次使用RouteHandler重新渲染是否更好? 最佳答案 我不知道Ratchet的细节,但一般来说,在你的情况下,footer将它放在RouteHandler中确实更好,这样你就可以定义它的存在取决于您的喜好。对于页眉,我相信

javascript - 如何将自定义组件与 react-router 路由转换一起使用?

文章ConfirmingNavigation说明如何在转换Hook中使用浏览器确认框。美好的。但我想使用我自己的对话框。如果我要使用history模块中的方法,我认为这是可能的。是否可以使用react-router中的setRouteLeaveHook来做到这一点? 最佳答案 核心问题是setRouteLeaveHook期望钩子(Hook)函数同步返回它的结果。这意味着您没有时间显示自定义对话框组件、等待用户单击一个选项,然后然后返回结果。所以我们需要一种方法来指定一个异步钩子(Hook)。这是我写的实用函数://Asynchron

javascript - 在 react-router v4 中获取路径参数

我正在尝试通过我的应用程序构建路由器链接,在这个场景中,我有三个文件。App.jsBook.jsDetailedView.js我在Book内部建立了一个仅在悬停时出现(在书的封面上){this.state.isHovered?():()}这会将我带到/details/12345(isbn10编号)我很难理解的是如何setState({iPressedThisBook})当按下或者如果我可以使用/12345之后的部分像过滤器一样创建因为在AppRoute将被连接为...()}/>稍后,我想捕获:id这样我就可以制作一个this.props.book.find(:id)在我的里面

javascript - React Router 在哪里使用 AJAX

我正在使用ReactRouter开发一个项目,我在数据流方面遇到了一些问题。在每个页面上都有一个获取组件数据的AJAX调用。我一直把它们放在componentDidMount中://BelowcodeiswritteninES6componentDidMount(){$.get(someURL,(data)=>{this.setState({data:data})})}虽然这适用于初始加载,但当url更改时它不会再次调用(需要手动刷新)。我似乎找不到合适的lifecycle进行AJAX调用。有人请告诉我在ReactRouter中获取数据的正确方法。 最佳答案

javascript - AngularJS ui-router 否则声明而不是 url?

我正在使用AngularJS和ui-router在我的app.js中。我有以下行:$urlRouterProvider.otherwise('/');然而,我不希望它把用户发送到一个URL,而是而是一个状态:.state('404',{views:{'body':{templateUrl:'partials/404.html',}}});通常我会这样做:$state.go('404');如何为otherwise方法执行此操作?注意:我的404状态没有URL,所以基本上它保留了用户输入或访问过的URL,只是更改了模板。 最佳答案 我想

javascript - React Router V4 使用 Redux-persist 和 React-snapshot 保护私有(private)路由

我正在使用ReactRouter实现私有(private)路由Route组件:functionPrivateRoute({component:Component,authed,emailVerified,...rest}){return(authed===true?:}/>)}预期行为:authed通过使用redux-persist通过页面刷新持久保存所以在页面刷新或重新加载时,如果authedProp是true那么路由器应该呈现从来没有去路径"/"问题所在的实际行为:与authed===true(坚持)重新加载页面或刷新页面会导致发生以下操作(选中reduxdevtools)那个行动

javascript - 如何在 Iron Router 的 onBeforeAction 中等待 http 调用?

我想创建一个预加载脚本来执行许多异步函数来下载外部内容。我在这里非常接近,但我还没有完全弄清楚如何在我的onBeforeAction函数中推迟调用this.next()。在下面的代码中,您可以看到我使用了一个循环和setTimeout,但我以某种方式丢失了路由器的上下文,并且this.next()未定义。我相信这是因为我的preloadProject函数结束了,路由器警告我忘记调用this.next();在我的waitToRender函数完成之前。if(Meteor.isClient){IR_BeforeHooks={preloadProject:function(){varitems

javascript - 如何翻译 react-router 路由路径

我的应用程序有多个语言环境(it、en)。我需要翻译所有的路线。例如,我的条款和条件页面必须具有路径(每个语言环境一个):it/terminien/terms我需要做的事情如下://routes.jsconstroutes=()如您所见,这个时髦的解决方案对于应用程序的可扩展性来说并不是很好。 最佳答案 我目前处理路由本地化的方法是像处理任何本地化内容一样处理它们。在你的情况下我会这样做://routes.jsfunctioncreateRoutes(language){/*You'llprobablyhavemoreworktod