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

两个问题：

  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 回答