Question

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

Per the docs我应该可以致电router.navigate(path)重定向。

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

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

了解详情：https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md

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

Answer 3

不确定这是否真的回答了问题，答案已被接受，但我会使用来自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>

我还在列表中使用它，使艺术家名称成为相册页面的链接。

Answer 4

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

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

environment.defaultEnvironment.navigate("/");

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

使用React路由器组件重定向

4 个答案: