React-路由器：导入和使用命名URL

Question

是否有一个正式的方法来导入我定义的路由，并从另一个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

两个问题：

1. 我是否应该使用window.location.replace（）或其他React-路由器方法来处理编程重定向？
2. 有没有办法导入路由器并重定向到命名的路由？

我想写这样的东西：

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

window.location.replace(MyAppRouter.login)

Answer 1

您可以使用transitiono（）实现您想要的。

如果您位于组件中，则可以使用导航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');