Tag: react router v4

React路由器v4中的嵌套路由: 我试图设置一些嵌套的路线来添加一个共同的布局。检查代码： <Router> <Route component={Layout}> <div> <Route path='/abc' component={ABC} /> <Route path='/xyz' component={XYZ} /> </div> </Route> </Router> 虽然这工作得很好，我仍然得到警告：警告：你不应该在同一条path上使用<Route component>和<Route children> 将被忽略

使用可选的path参数响应路由器: 我想声明一个可选path参数的path，因此当我添加页面做额外的事情（例如填充一些数据）： http：// localhost / app / path / to / page <=渲染页面http：// localhost / app / path / to / page / pathParam <=根据pathParam渲染页面在我的反应路由器中，我有以下path，以支持这两个选项（这是一个简化的例子）： <Router history={history}> <Route path="/path" component={IndexPage}> <Route path="to/page" component={MyPage}/> <Route path="to/page/:pathParam" component={MyPage}/> </Route> </Router> 我的问题是，我们可以在一条路线上宣布吗？如果我只添加第二行，那么没有find没有参数的路由。编辑＃1：这里提到的关于下面的语法的解决scheme对我来说不起作用，这是一个合适的吗？它是否存在于文档中？ <Route path="/product/:productName/?:urlID?" handler={SomeHandler} /> 我的反应路由器版本是：1.0.3

如何在React Router v4中推送历史logging？: 在当前版本的React Router（v3）中，我可以接受服务器响应，并使用browserHistory.push转到相应的响应页面。但是，这在v4中是不可用的，我不确定处理这个问题的适当方法是什么。在这个例子中，使用Redux时，组件/ 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的函数redirect到购物车页面？

将自定义道具传递给react-router v4中的路由器组件: 我正在使用React Router来创build一个多页面的应用程序。我的主要组件是<App/> ，它呈现所有的路由到子组件。我试图通过道路传递道具，根据我做的一些研究，子元素最常用的方法是通过它inheritance的this.props.route对象传递下去。但是，这个对象对我来说是不确定的。在我的render()函数在子组件中，我console.log(this.props)并返回一个对象，看起来像这样 {match: Object, location: Object, history: Object, staticContext: undefined} 看起来不像我期望的道具。这是我的代码详细。父组件（我试图在我所有的子组件中将“hi”这个词作为一个叫做“test”的道具）： import { BrowserRouter as Router, HashRouter, Route, Switch } from 'react-router-dom'; import Link from 'react-router'; import React from 'react'; import Home from './Home.jsx'; import Nav from './Nav.jsx'; import Progress from './Progress.jsx'; import Test from './Test.jsx'; export […]

在react-router v4中嵌套路由: 我在我的应用程序中将反应路由器升级到版本4。但现在我得到了错误 Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored 这个路由有什么问题？ import { Switch, BrowserRouter as Router, Route, IndexRoute, Redirect, browserHistory } from 'react-router-dom' render(( <Router history={ browserHistory }> <Switch> <Route path='/' component={ Main }> <IndexRoute component={ Search } /> <Route path='cars/:id' component={ Cars […]

嵌套路由与反应路由器v4: 我目前正在使用反应路由器v4筑巢路线挣扎。最接近的例子是React-Router v4文档中的路由configuration。我想分两个不同的部分我的应用程序。前端和pipe理区域。我在想这样的事情： <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} /> 前端与pipe理区域有不同的布局和风格。所以在首页的路线回家，约一等应该是孩子的路线。 / home应该被渲染到Frontpage组件中， / admin / home应该被渲染到后端组件中。我尝试了一些变化，但我总是没有打到/ home或/ admin / home。编辑 – 19.04.2017 因为这个post现在有很多的意见，所以我用最终的解决scheme进行了更新。我希望它可以帮助别人。编辑 – 08.05.2017 删除旧的解决scheme […]

以编程方式导航使用反应路由器V4: 我刚刚从v3replacereact-router到v4。但我不知道如何以编程方式在Component的成员函数中导航。即在handleClick()函数我想导航到/path/some/where处理一些数据。我曾经这样做： import { browserHistory } from 'react-router' browserHistory.push('/path/some/where') 但是我在v4中找不到这样的界面。我如何使用v4导航？