3

定義したルートをインポートし、別の React コンポーネントからそのルーター内の名前付きパターンにリダイレクトするための正式な方法はありますか?

私のルートが次のようになっているとします。

# router.cjsx
Routes = require'react-router').Routes
Route = require('react-router').Route

React.renderComponent((
  <Routes location="history">
    <Route handler={App}>
      <Route name="login" handler={LoginComponent} path="/login/" />
    </Route>
  </Routes>
), document.body)

そして、私は次のようなコンポーネントを持っています:

# my-component.cjsx
React = require('react')

module.exports = React.createClass
  componentDidMount: ->
    # If user is not authenticated, redirect them to the login component
    if not @props.user.isAuthed
       window.location.replace('/login/')  # I WOULD RATHER NOT HARDCODE THIS URL

2 つの質問:

  1. window.location.replace()プログラムによるリダイレクトを処理するには、または他の React-Router メソッドを使用する必要がありますか?
  2. ルーターをインポートして名前付きルートにリダイレクトする方法はありますか?

私は次のようなものを書きたい：

# my-component.cjsx
MyAppRouter = require('./router').MyRouter  # Should I be exporting this?

window.location.replace(MyAppRouter.login)
4

1 に答える 1

1

を使用して目的を達成できますtransitionTo()。

コンポーネント内にいる場合は、Navigation mixin を使用できます: https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md

または、コンポーネントの外側 (ストア内など) でナビゲートしたい場合は、次の例を使用できます: https://github.com/rackt/react-router/issues/380。基本的に、次のことを行う必要があります。

 var AppRouter = React.renderComponent((
     <Routes location="history">
       <Route handler={App}>
       <Route name="login" handler={LoginComponent} path="/login/" />
       </Route>
     </Routes>
 ), document.body)


 // Somewhere else
 AppRouter.transitionTo('foo');
于 2014-11-07T18:41:16.107 に答える