reactjs - React-Router:导入和使用命名 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-Router 方法来处理编程重定向吗？
2. 有没有办法导入路由器并重定向到指定路由？

我想写这样的东西:

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

window.location.replace(MyAppRouter.login)

Answer 1

您可以使用 transitionTo() 完成您想要的任务。

如果您在组件内，则可以使用导航混合: 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');