标签: react-router-v4

在当前版本的React Router(v3)中,我可以接受服务器响应并使用它browserHistory.push来转到相应的响应页面.但是,这在v4中不可用,我不确定处理它的适当方法是什么.

在此示例中,使用Redux,在用户提交表单时调用components/app-product-form.jsthis.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的功能重定向到Cart页面？

我刚刚react-router从v3 更换为v4.
但我不知道如何以编程方式导航到一个成员函数Component.即在handleClick()功能中我想/path/some/where在处理一些数据后导航到.我曾经这样做过:

import { browserHistory } from 'react-router'
browserHistory.push('/path/some/where')

但我在v4中找不到这样的接口.
如何使用v4导航？

我想声明一个带有可选路径参数的路径,因此当我添加页面以执行额外的操作时(例如填充一些数据):

http:// localhost/app/path/to/page <=呈现页面 http:// localhost/app/path/to/page/pathParam <=根据pathParam呈现包含一些数据的页面

在我的反应路由器中,我有以下路径,以支持这两个选项(这是一个简化的例子):

<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

我目前正在使用react router v4进行嵌套路由.

最接近的示例是React-Router v4文档中的路由配置 .

我想将我的应用程序拆分为两个不同的部分.

前端和管理区域.

我在考虑这样的事情:

<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

删除旧解决方案

最终解决方案

这是我现在使用的最终解决方案.此示例还有一个全局错误组件,如传统的404页面.

import React, { Component } from 'react';
import { Switch, Route, Redirect, Link } from 'react-router-dom';

const Home = () => <div><h1>Home</h1></div>; …

我想显示一个title以<AppBar />某种方式从当前路线传入的内容.

在React Router v4中,如何<AppBar />才能将当前路由传递给它的title道具？

  <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 />？

我有几个按钮充当路线.每次更改路线时,我都要确保激活的按钮发生变化.

有没有办法在路由器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)docs中,它表明了类似的东西

<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 path="/protected" component={Protected}/>
    </div>
</Router>

但是,将一堆路线组合在一起是否有可能实现这一目标？

UPDATE

好的,经过一些研究,我想出了这个:

import React, {PropTypes} from "react"
import {Route} from "react-router-dom"

export default class AuthenticatedRoute extends React.Component …

我在我的项目中使用react-router-dom 4.0.0-beta.6.我有一个如下代码:

<Route exact path="/home" component={HomePage}/>

我想在HomePage组件中获取查询参数.我找到了location.searchparam,看起来像这样:?key=value所以它是未解析的.

使用react-router v4获取查询参数的正确方法是什么？

我正在尝试设置一些嵌套路由来添加公共布局.检查代码:

  <Router>
    <Route component={Layout}>
      <div>
        <Route path='/abc' component={ABC} />
        <Route path='/xyz' component={XYZ} />
      </div>
    </Route>
  </Router>

虽然这很好用,但我仍然收到警告:

警告:您不应在同一路线中使用<Route component>和<Route children>; 将被忽略

除了能够在NavLink上设置"activeClassName"和"activeStyle"之外,在您的站点上创建指向非导航元素上的其他路径(即,不是页眉或页脚中的主导航)的链接时,是否有任何理由使用NavLink over Link那些不需要活跃的州/班级？