Question

我有一个简单的反应应用程序，反应路由器设置如下。它位于我应用的根目录（/）

import React, {Component} from 'react';
import { render } from 'react-dom'
import { Router, Route, hashHistory, IndexRoute } from 'react-router'

import Main from "./components/main";
import Index from "./components/polls/index";
import New from "./components/polls/new";
import Show from "./components/polls/show";
import PollAdmin from "./components/polls/poll_admin"

render((
  <Router history={hashHistory}>
    <Route path="/" component={Main}>
      <IndexRoute component={Index}/>
      // more components here, removed for brevity
    </Route>

  </Router>
), document.getElementById('app'))

当用户登录（不是路由器的一部分）时，会将其重定向回/。一旦他们这样做，Index组件响应（见下文）。浏览器然后访问/api/polls，这不是预期的。 /api/polls是获取要显示的数据的API终点。我通过删除componentDidMount函数来确认这一点。随着该功能的消失，浏览器不会访问/ api / polls

为什么浏览器访问/api/polls而不是发出异步请求？如何正确地重定向回/？

import React, {Component} from 'react';
import { Link } from 'react-router';
import axios from 'axios';

class Index extends React.Component {

  constructor(props){

    super(props);
    this.state = {
      polls: []
    }
  }

  componentDidMount() {
    var _this = this;

      axios('/api/polls')
        .then(function(result){
          _this.setState({
            polls: result.data.polls
          })
        })
        .catch(function(err){
        })

  }

  ...
  }

}

export default Index;

Answer 1

经过多一点探讨我解决了这个问题。首次访问/时，组件Index会向/api/polls发出异步请求。然后用户通过Twitter登录。以下是相关路线：

router.get('/auth/twitter', passport.authenticate('twitter'));
router.get('/auth/twitter/callback', passport.authenticate('twitter', { failureRedirect: '/login' }), function(req, res) {
  res.redirect(req.session.returnTo || '/');
});

问题在于req.session.returnTo将/api/polls存储为最后一个“访问过的”网址。登录浏览器后重定向到/api/polls在页面上呈现一些丑陋的json。就我的目的而言，这是一个简单的解决方案。我刚刚将路线改为：

router.get('/auth/linkedin/callback', passport.authenticate('linkedin', { failureRedirect: '/login' }), function(req, res) {
  res.redirect('/');
});

用户总是被重定向回/，这正是我想要的。如果您想重定向回用户的最后一页，我不确定该怎么办。

意外重定向与反应路由器

1 个答案: