使用 React Router 组件进行重定向答案

【问题标题】：Redirection with React Router Component使用 React Router 组件进行重定向
【发布时间】：2014-10-12 01:17:07
【问题描述】：

react-router-component 有问题。我正在尝试创建一个 redirect 库，该库执行我可以从 .jsx 组件中要求的“软”重定向（相当于单击链接，而不是 window.location = ...）。

Per the docs 我应该可以调用router.navigate(path) 进行重定向。

例如，当我在页面 A 上调用它时，地址栏中的 url 会根据需要更改为页面 B。但是，页面A 只是重新加载，地址栏保留为页面B，显示为页面A。有什么建议吗？

【问题讨论】：

你能添加一个有问题的代码示例吗？鉴于问题的文本描述，很难调试。
当然。 Code on pastebin。在该期间被包含在链接中之前；对此感到抱歉。
您好，请问您是如何解决的？谢谢。

标签： reactjs

【解决方案1】：

您应该能够使用 Navigation mixin 解决此问题。

然后您可以使用this.transitionTo 与您的页面名称。

var PageAdd = React.createClass({

    mixins : [Router.Navigation],

    handleSubmit : function(e) {
        e.preventDefault();

        this.transitionTo('pages');

    },

    render: function () {
        return (
            <form onSubmit={this.handleSubmit}>
                <button type="submit" className="btn btn-default">Submit</button>
            </form>
        );
    }
});

【讨论】：

这个答案适用于 react-router，而不是 react-router-component。
你是完全正确的克里斯，（爱资产顺便说一句，谢谢）。我想我最好删除这个答案。我的错误:)。

【解决方案2】：

我们最终做了一个 hacky 解决方案：当重定向发生时调用以下代码，其中 path 类似于 /questions/23。

// call an event to get the router from somewhere else that's listening
// to this event specifically to provide the router
document.dispatchEvent(new CustomEvent('router.get', {
  detail: {
    callback: function(router) {
      router.navigate(path);
    }
  }
}));

然后，在路由器中，事件监听器：

var App = React.createClass({
  listenForRouter: function listenForRouter () {

    var self = this;
    document.addEventListener('router.get', function(e) {
      setTimeout(function() {
        e.detail.callback(self
                          .refs.router
                          .refs.locations);
      }, 1);
    });
  },

  componentDidMount: function componentDidMount () {
    this.listenForRouter();
  },

  // additional lifecycle methods
});

【讨论】：

【解决方案3】：

这没有详细记录，但可以使用environment.defaultEnvironment 对象的navigate(path) 方法执行软重定向。

import {environment} from 'react-router-component'
...

environment.defaultEnvironment.navigate("/");

这并没有考虑到当前的路由上下文，所以它不允许你重定向到相对于内部路由器的路径。有关尊重路由上下文的方法，请参阅NavigatableMixin。 Mixins 不是我的解决方案的选项，因为我使用的是 ES6 类，但可以从那里复制实现。

【讨论】：

【解决方案4】：

不确定这是否真的回答了问题，并且已经接受了答案，但我会使用 react-router 中的链接：

在您定义名称的路线中（来自音乐数据库页面：

var routes = (
    <Route name="app" path="/" handler={require('./components/app')}>
        <DefaultRoute handler={require('./components/homePage')}/>
        <Route name="artist" handler={require('./components/artist/artistsPage')}/>
        <Route name="artistSearch" path="artist/:artistSearchName" handler={require('./components/artist/artistsPage')}/>
        <Route name="artistSearchPage" handler={require('./components/artist/manageArtistSearchPage')}/>
        <Route name="album" handler={require('./components/album/albumsPage')}/>
        <Route name="searchAlbums" path="album/:artistId" handler={require('./components/album/albumsPage')}/>
        <Route name="song" handler={require('./components/song/songsPage')}/>
        <NotFoundRoute handler={require('./components/pageNotFound')}/>
    </Route>
);

然后在你的组件中从 React-router 导入链接：

var Link = require('react-router').Link; //(ES5)
import {link as Link} from 'react-router'; //(ES6)

然后你可以用作标签，它会像一个带有 href = "something" 的标签一样工作

    <div>
        <h1>Artist Search Page</h1>
        <ArtistSearchForm
            artistName={this.state.artistName}
            onChange={this.onArtistChangeHandler}
        />
        <br/>
        <Link to="artistSearch" params={{artistSearchName: this.state.artistName}} className="btn btn-default">Search</Link>
    </div>

我还在一个列表中使用它来使艺术家名称成为专辑页面的链接。

【讨论】：