如何使用react-router重定向到另一个路由? [英] How to do a redirect to another route with react-router?

问题描述

我正在尝试使用react-router( version ^ 1.0.3 )重定向到另一个视图，这让我很累.

I am trying to do A SIMPLE using react-router ( version ^1.0.3 ) to redirect to another view and I am just getting tired.

import React from 'react';
import {Router, Route, Link, RouteHandler} from 'react-router';


class HomeSection extends React.Component {

  static contextTypes = {
    router: PropTypes.func.isRequired
  };

  constructor(props, context) {
    super(props, context);
  }

  handleClick = () => {
    console.log('HERE!', this.contextTypes);
    // this.context.location.transitionTo('login');
  };

  render() {
    return (
      <Grid>
        <Row className="text-center">          
          <Col md={12} xs={12}>
            <div className="input-group">
              <span className="input-group-btn">
                <button onClick={this.handleClick} type="button">
                </button>
              </span>
            </div>
          </Col>
        </Row>
      </Grid>
    );
  }
};

HomeSection.contextTypes = {
  location() {
    React.PropTypes.func.isRequired
  }
}

export default HomeSection;

我只需要将使用信息发送到'/login'就可以了.

all I need is to send the use to '/login' and that's it.

我该怎么办?

控制台错误:

未捕获的ReferenceError:未定义PropTypes

Uncaught ReferenceError: PropTypes is not defined

包含我的路线的文件

// LIBRARY
/*eslint-disable no-unused-vars*/
import React from 'react';
/*eslint-enable no-unused-vars*/
import {Route, IndexRoute} from 'react-router';

// COMPONENT
import Application from './components/App/App';
import Contact from './components/ContactSection/Contact';
import HomeSection from './components/HomeSection/HomeSection';
import NotFoundSection from './components/NotFoundSection/NotFoundSection';
import TodoSection from './components/TodoSection/TodoSection';
import LoginForm from './components/LoginForm/LoginForm';
import SignupForm from './components/SignupForm/SignupForm';

export default (
    <Route component={Application} path='/'>
      <IndexRoute component={HomeSection} />
      <Route component={HomeSection} path='home' />
      <Route component={TodoSection} path='todo' />
      <Route component={Contact} path='contact' />
      <Route component={LoginForm} path='login' />
      <Route component={SignupForm} path='signup' />
      <Route component={NotFoundSection} path='*' />
    </Route>
);

推荐答案

对于简单答案，您可以使用 react-router 中的 Link 组件，而不是>按钮.有一些方法可以更改JS中的路由，但是似乎您在这里不需要.

For the simple answer, you can use Link component from react-router, instead of button. There is ways to change the route in JS, but seems you don't need that here.

<span className="input-group-btn">
  <Link to="/login" />Click to login</Link>
</span>

要在1.0.x中以编程方式执行此操作，请在clickHandler函数内部执行以下操作:

To do it programmatically in 1.0.x, you do like this, inside your clickHandler function:

this.history.pushState(null，'login');

来自升级文档此处

您应该通过 react-router 将 this.history 放置在路由处理程序组件上.如果其子组件位于 routes 定义中提到的子组件之下，则可能需要进一步将该子组件向下传递

You should have this.history placed on your route handler component by react-router. If it child component beneath that mentioned in routes definition, you may need pass that down further

这篇关于如何使用react-router重定向到另一个路由?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！