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

两个问题：

我应该使用window.location.replace()或其他一些React-Router方法来处理程序重定向吗？
有没有办法导入路由器并重定向到指定的路由？

我想写一些类似的东西：

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

window.location.replace(MyAppRouter.login)

Answer 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');

React-Router：导入和使用命名URL

1 个答案: