Question

我的路线如下：

<Route component={Bar} path="/foo/:num"/>

我想在num组件中呈现视图之前检查数据库中是否存在Bar。我尝试做的是使用如下所示的component mounting函数，以便在无效num时重定向到另一条路线：

import React, { Component } from 'react';
import {browserHistory} from 'react-router';
import { isNumExist } from '../../services/index.js';

class Bar extends Component {

  componentWillMount(){
    if (!isNumExist(this.props.params.num)){
      browserHistory.push('/home');
    }
  }

  render() {
    ... 
  }
}

此处index.js定义isNumExist()：

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
  foo.map((element, i) => {
    if (foo[i].num == num) {
      return true;
    }
  });
  return false;
}

现在每次重新加载页面时，isNumExist()函数会以false触发两次作为第二个输出。因此，无论{0}存在与否，页面都会重定向到给定路由。如果我以错误的方式做这件事，或者最好用细节建议真正的问题，请纠正我。

Answer 1

您的函数将始终返回false，因为未返回map函数结果。

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
  foo.map((element, i) => {
    if (foo[i].num == num) {
      return true;
    }
  });
  return false;
}

foo.map(...)将返回一个数组，但不会随时返回。来自map函数内部函数的函数签名仅适用于该函数本身。

所以试试：

let foo = [...]; // Contains an array fetched from database
function isNumExist(num){
   var good_numbers_length = 0;
   var length = foo.map((element, i) => {
    if (foo[i].num == num) {
      good_numbers_length += 1;
    }
  });
  if (good_numbers_length > 0)
  {
        return true;
  }  
  return false;
}

此外，browserHistory.push('/home');无法创建正确的重定向。将其更改为window.location = 'url'或类似react-router的友好反应。

Answer 2

您可以将它放在您的react的入口点文件中（通常命名为app.js或index.js）。每次加载页面时只调用一次。

所以你必须：

在您的入口点文件中导入您的历史记录依赖项
使用推送功能转到'/ home'

React

2 个答案: