Как программно выполнять навигацию с помощью React Router?

Предупреждение: этот ответ охватывает только версии ReactRouter до 1.0.

Я обновлю этот ответ с примерами использования версии 1.0.0-rc1 позже!

Вы можете сделать это и без миксинов.

let Authentication = React.createClass({
  contextTypes: {
    router: React.PropTypes.func
  },
  handleClick(e) {
    e.preventDefault();
    this.context.router.transitionTo('/');
  },
  render(){
    return (<div onClick={this.handleClick}>Нажми на меня!</div>);
  }
});

Важно помнить, что контекст недоступен, если вы не определите contextTypes в классе.

Что касается контекста, это объект, похожий на props, который передается от родителя к ребенку, но передается неявно, без необходимости повторно объявлять props каждый раз. Посмотрите здесь: https://www.tildedave.com/2014/11/15/introduction-to-contexts-in-react-js.html

В ответ на ваш вопрос о программной навигации в компонентах ES6 + React с использованием react-router, я хочу поделиться решением, которое сработало для меня. Я следовал примеру Фелиппе Скиннера, но добавил полный пример для начинающих, как я.

Ниже приведены версии, которые я использовал:

"react-router": "^2.7.0"
"react": "^15.3.1"

Вот мой React-компонент, в котором я применил программную навигацию с использованием react-router:

import React from 'react';

class LoginComp extends React.Component {
   constructor(context) {
    super(context);
    this.state = {
      uname: '',
      pwd: ''
    };
  }

  redirectToMainPage() {
        this.context.router.replace('/home');
  }

  render() {
    return (
      <div>
        {/* Пропущен HTML-код */}
        <button onClick={this.redirectToMainPage.bind(this)}>Redirect</button>
      </div>
    );
  }
};

LoginComp.contextTypes = {
    router: React.PropTypes.object.isRequired
}

module.exports = LoginComp;

Вот конфигурация для моего роутера:

import { Router, Route, IndexRedirect, browserHistory } from 'react-router'

render(
  <Router history={browserHistory}>
    <Route path='/' component={ParentComp}>
      <IndexRedirect to="/login"/>
      <Route path='/login' component={LoginComp}/>
      <Route path='/home' component={HomeComp}/>
      <Route path='/repair' component={RepairJobComp} />
      <Route path='/service' component={ServiceJobComp} />
    </Route>
  </Router>, 
  document.getElementById('root')
);

Надеюсь, это поможет вам разобраться с программной навигацией в вашем приложении React! Если у вас есть дополнительные вопросы, не стесняйтесь задавать их.

В React-Router v4 и ES6 вы можете использовать withRouter и this.props.history.push для перенаправления.

import { withRouter } from 'react-router-dom';

class Home extends Component {

    componentDidMount() {
        this.props.history.push('/redirect-to');
    }
}

export default withRouter(Home);

В данном примере мы оборачиваем компонент Home в withRouter, что позволяет ему получить доступ к объекту истории через this.props.history. В методе componentDidMount, который вызывается сразу после монтирования компонента, мы вызываем this.props.history.push('/redirect-to') для перенаправления пользователя на новый маршрут.

Чтобы использовать withRouter с компонентом на классовом синтаксисе, попробуйте сделать что-то подобное ниже. Не забудьте изменить оператор экспорта, чтобы использовать withRouter:

import { withRouter } from 'react-router-dom';

class YourClass extends React.Component {
  yourFunction = () => {
    doSomeAsyncAction(() =>
      this.props.history.push('/other_location')
    );
  }

  render() {
    return (
      <div>
        <Form onSubmit={ this.yourFunction } />
      </div>
    );
  }
}

export default withRouter(YourClass);

Таким образом, вы сможете получить доступ к объекту history и переходить между маршрутами в вашем классовом компоненте.