Questions tagged «react-router-v4»

在当前版本的React Router（v3）中，我可以接受服务器响应并使用 browserHistory.push转到相应的响应页面。但是，这在v4中不可用，我不确定哪种适当的处理方式。 在此示例中，使用Redux，当用户提交表单时，components / app-product-form.js调用this.props.addProduct(props)。服务器返回成功后，该用户将被带到“购物车”页面。 // actions/index.js export function addProduct(props) { return dispatch => axios.post(`${ROOT_URL}/cart`, props, config) .then(response => { dispatch({ type: types.AUTH_USER }); localStorage.setItem('token', response.data.token); browserHistory.push('/cart'); // no longer in React Router V4 }); } 如何从React Router v4的功能重定向到购物车页面？

360 reactjs  react-router  react-router-v4 

我刚刚react-router从v3 替换为v4。 但是我不确定如何以编程方式在的成员函数中进行导航Component。即在handleClick()功能上我想导航到/path/some/where处理一些数据后。我曾经通过以下方式做到这一点： import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') 但是我在v4中找不到这样的接口。 如何使用v4导航？

336 reactjs  ecmascript-6  react-router-v4 

我想用可选的path参数声明一个路径，因此当我添加它时，页面会做一些额外的事情（例如，填充一些数据）： http：// localhost / app / path / to / page <=渲染页面 http：// localhost / app / path / to / page / pathParam <=根据pathParam使用某些数据渲染页面 在我的React Router中，我具有以下路径，以支持两个选项（这是一个简化的示例）： <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> 我的问题是，我们可以在一条路线中声明吗？如果仅添加第二行，则找不到没有参数的路由。 编辑＃1： 这里提到的有关以下语法的解决方案对我而言不起作用，这是正确的解决方案吗？文档中是否存在？ <Route path="/product/:productName/?:urlID?" handler={SomeHandler} /> 我的react-router版本是：1.0.3

306 javascript  reactjs  react-router  react-router-v4 

我目前正在使用React Router v4来嵌套路由。 最接近的示例是React-Router v4文档中的route配置 。 我想将我的应用分为两部分。 前端和管理区域。 我在想这样的事情： <Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} /> 前端的布局和样式与管理区域不同。因此，在首页中，回家的路线大约应该是子路线。 / home应该呈现在Frontpage组件中，/ admin / home应该呈现在Backend组件中。 我尝试了一些变体，但始终以不打/ home或/ admin / home结尾。 编辑-19.04.2017 因为这篇文章现在有很多观点，所以我用最终解决方案对其进行了更新。希望对您有所帮助。 编辑-08.05.2017 …

261 javascript  reactjs  nested  react-router  react-router-v4 

我想显示title在<AppBar />以某种方式从目前的路线通过。 在React Router v4中，如何将<AppBar />当前路由传递到titleprop中？ <Router basename='/app'> <main> <Menu active={menu} close={this.closeMenu} /> <Overlay active={menu} onClick={this.closeMenu} /> <AppBar handleMenuIcon={this.handleMenuIcon} title='Test' /> <Route path='/customers' component={Customers} /> </main> </Router> 有没有办法通过从自定义自定义标题prop上<Route />？

180 reactjs  react-router  react-router-v4 

我有几个充当路线的按钮。每次更改路线时，我都想确保活动的按钮会更改。 有没有办法监听React Router v4中的路由更改？

138 react-router-v4 

我试图实现经过身份验证的路由，但是发现React Router 4现在阻止了它的工作： <Route exact path="/" component={Index} /> <Route path="/auth" component={UnauthenticatedWrapper}> <Route path="/auth/login" component={LoginBotBot} /> </Route> <Route path="/domains" component={AuthenticatedWrapper}> <Route exact path="/domains" component={DomainsIndex} /> </Route> 错误是： 警告：您不应使用<Route component>和<Route children>在同一路线上；<Route children>将被忽略 在这种情况下，实现此目标的正确方法是什么？ 它出现在react-router（v4）文档中，提示类似 <Router> <div> <AuthButton/> <ul> <li><Link to="/public">Public Page</Link></li> <li><Link to="/protected">Protected Page</Link></li> </ul> <Route path="/public" component={Public}/> <Route path="/login" component={Login}/> <PrivateRoute …

122 javascript  reactjs  react-router  react-router-v4 

除了可以在NavLink上设置“ activeClassName”和“ activeStyle”之外，在网站上创建指向非导航元素（例如，页眉或页脚中的非主导航）上的其他路线的链接时，是否有任何理由在链接上使用NavLink不需要活动状态/类？

94 reactjs  react-router  react-router-v4 

我在我的项目中使用react-router-dom 4.0.0-beta.6。我有如下代码： <Route exact path="/home" component={HomePage}/> 我想在HomePage组件中获取查询参数。我已经找到了location.searchparam，它看起来像这样：?key=value，所以它是未解析的。 用react-router v4获取查询参数的正确方法是什么？

87 react-router  react-router-v4  react-router-dom 

我必须根据浏览历史实现一些业务逻辑。 我想做的是这样的： reactRouter.onUrlChange(url => { this.history.push(url); }); URL更新后，有什么方法可以接收来自react-router的回调吗？

87 reactjs  react-router  react-router-v4  react-router-redux  react-router-dom 

试图弄清楚如何返回上一页。我在用[react-router-v4][1] 这是我在第一个登录页面中配置的代码： <Router> <div> <Link to="/"><div className="routerStyle"><Glyphicon glyph="home" /></div></Link> <Route exact path="/" component={Page1}/> <Route path="/Page2" component={Page2}/> <Route path="/Page3" component={Page3}/> </div> </Router> 为了转发到后续页面，我只需执行以下操作： this.props.history.push('/Page2'); 但是，如何返回上一页？尝试了以下一些事情，但没有运气：1。this.props.history.goBack(); 给出错误： TypeError：null不是对象（评估“ this.props”） this.context.router.goBack(); 给出错误： TypeError：null不是对象（评估“ this.context”） this.props.history.push('/'); 给出错误： TypeError：null不是对象（评估“ this.props”） Page1在下面发布代码： import React, {Component} from 'react'; import {Button} from 'react-bootstrap'; class Page1 extends Component { …

84 javascript  reactjs  react-router-v4