Как в Reac Router программно поменять путь?

Question

[Ucorp]

Есть два компонента. Первый компонент показывается сразу. Как с помощью React Router показать второй, например, через 10 секунд? Приложение без серверной стороны.

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';

var ComponentOne = React.createClass({
  componentDidMount: function () {
    setTimeout(function () {
      browserHistory.push('/two')
    }, 5000);
  },
  render: function () {
    return (
      <div className="one">Component One</div>
    );
  }
});

var ComponentTwo = React.createClass({
  render: function () {
    return (
      <div className="two">Component Two</div>
    );
  }
});


ReactDOM.render((
  <Router history={browserHistory}>
    <Route path="/" component={ComponentOne}>
      <IndexRoute component={ComponentOne}/>
      <Route path="/two" component={ComponentTwo} />
    </Route>
  </Router>
), document.getElementById('app'));

Answer 1

[Максим]

Путаница в вопросе:
1) как программно поменять путь?
2) как с помощью RR показать второй компонент через 10 сек?

То есть, вам нужно изменять роут, например через 10 секунд? (таким образом компонент, принадлежащий этому роуту будет показан).

Программно изменить роут можно с помощью push, replace (там же). Там же есть примеры, один из них.

Comments

[Ucorp]

Пробовал, не получается. Я что-то делаю не так.

[Aves]

Ucorp: в render ComponentOne не хватает {this.props.children}

Answer 2

[Mikhail Osher]

В componentDidMount первого компонента поставить таймер на редирект на второй компонент.