相关疑难解决方法(0)

在当前版本的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为我的React.js应用程序提供了以下结构:

var Dashboard = require('./Dashboard');
var Comments = require('./Comments');

var Index = React.createClass({
  render: function () {
    return (
        <div>
            <header>Some header</header>
            <RouteHandler />
        </div>
    );
  }
});

var routes = (
  <Route path="/" handler={Index}>
    <Route path="comments" handler={Comments}/>
    <DefaultRoute handler={Dashboard}/>
  </Route>
);

ReactRouter.run(routes, function (Handler) {
  React.render(<Handler/>, document.body);
});

我想将一些属性传递给Comments组件.

(通常我会这样做<Comments myprop="value" />)

使用React Router,最简单,最正确的方法是什么？

任何人都可以告诉我如何回到上一页而不是特定的路线？

使用此代码时:

var BackButton = React.createClass({

 mixins: [Router.Navigation],
  render: function() {
    return (
        <button
            className="button icon-left"
            onClick={this.navigateBack}>
            Back
        </button>
    );
  },

  navigateBack: function(){
    this.goBack();
  }
});

得到此错误,goBack()被忽略,因为没有路由器历史记录

这是我的路线:

// Routing Components
Route = Router.Route;
RouteHandler = Router.RouteHandler;
DefaultRoute = Router.DefaultRoute;

var routes = (
 <Route name="app" path="/" handler={OurSchoolsApp}>
     <DefaultRoute name="home" handler={HomePage} />
     <Route name="add-school" handler={AddSchoolPage}  />
     <Route name="calendar" handler={CalendarPage}  />
     <Route name="calendar-detail" path="calendar-detail/:id" handler={CalendarDetailPage} />
     <Route name="info-detail" path="info-detail/:id" handler={InfoDetailPage} />
     <Route name="info" handler={InfoPage} />
     <Route name="news" handler={NewsListPage} />
     <Route …

我有一些小问题从React-Router v3迁移到v4.在v3中我能够在任何地方执行此操作:

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

我如何在第4版中实现这一目标.

我知道withRouter当你在Component中时,我可以使用,特别的,反应上下文或事件路由器道具.但事实并非如此.

我正在寻找v4 中NavigatingOutsideOfComponents的等价性

我似乎无法找到如何使用react-router更新查询参数而不使用<Link/>.hashHistory.push(url)似乎没有注册查询参数,似乎你不能将查询对象或任何东西作为第二个参数传递.

如何从更改URL /shop/Clothes/dresses,以/shop/Clothes/dresses?color=blue在反应路由器没有使用<Link>？

并且onChange函数真的是监听查询更改的唯一方法吗？为什么不自动检测到查询更改并对响应更改的方式做出反应？

我有以下内容:

如何摆脱蓝色下划线？代码如下:

<Link to="first"><MenuItem style={{paddingLeft: 13, textDecoration: 'none'}}> Team 1 </MenuItem></Link>

MenuItem组件来自http://www.material-ui.com/#/components/menu

任何见解或指导将不胜感激.先感谢您.

我正在开发中,我检查,如果用户不是一个应用程序loggedIn我都显示登录表单,否则dispatch一个action将改变路线和加载其他组件.这是我的代码:

render() {
    if (isLoggedIn) {
        // dispatch an action to change the route
    }
    // return login component
    <Login />
}

我怎么能实现这一点,因为我无法改变渲染功能内的状态.

我等不及了,我开始使用react-routerv4 的最新alpha版本.全新<BrowserRouter/>功能非常适合保持您的UI与浏览器历史记录同步,但如何使用它以编程方式进行导航？

我在我的React应用程序中使用react-router v4和material-ui.我想知道如果GridTile在GridList中点击一下,如何更改URL .

我最初的想法是使用处理程序onTouchTap.但是,我可以看到重定向的唯一方法是使用组件Redirect或Link.如何在不渲染这两个组件的情况下更改URL？

我试过this.context.router.push('/foo')但它似乎没有用.

我正在使用React和bootstrap开发Web应用程序.当应用按钮onClick时,我花了很多时间让我的页面重定向到另一个.如果在一个href后,我不能去另一页.

那么请你告诉我是否需要使用反应导航或其他方法使用Button onClick导航页面？

import React, { Component } from 'react';
import { Button, Card, CardBody, CardGroup, Col, Container, Input, InputGroup, InputGroupAddon, InputGroupText, Row, NavLink  } from 'reactstrap';

class LoginLayout extends Component {

  render() {
    return (
 <div className="app flex-row align-items-center">
        <Container>
     ...
                    <Row>
                      <Col xs="6">                      
                        <Button color="primary" className="px-4">
                            Login
                         </Button>
                      </Col>
                      <Col xs="6" className="text-right">
                        <Button color="link" className="px-0">Forgot password?</Button>
                      </Col>
                    </Row>
               ...
        </Container>
      </div>
    );
  }
}