Question

通常在输入函数的反应路由器路由看起来有点类似于此：

const isLoggedIn = (nextState, replace, callback) => {
  /* Some checks / redirects here */
}

我们在路线中使用它

<Route onEnter={isLoggedIn} />

我试图传递一个自定义参数，但没有运气，基本上我想要实现这样的东西

<Route onEnter={isLoggedIn(myParam)} />

并且能够在功能中访问它，所以

const isLoggedIn = (myParam, nextState, replace, callback) => {
  /* Some checks / redirects here */
}

Answer 1

您可以使用上下文绑定来执行此操作。从React Router中调用该函数时，只需在auth函数中绑定所需的数据即可。您也可以通过这种方式传递对象。您的代码如下：

function requireAuth(nextState, replace) {
   console.log(this.loggedIn)
}

<Route onEnter={requireAuth.bind({"loggeIn":this.props.loggedIn})} />

如果使用ECMAScript 6，则另一个选项是使用函数参数：

var requireAuth=(loggedIn)=>{
   return (nextState,replace)=>{
     console.log(loggedIn)
   }
}

<Route onEnter={requireAuth(this.props.loggedIn)} />

它应该更短：

var requireAuth=(loggedIn)=>(nextState,replace)=>{
     console.log(loggedIn)
}

<Route onEnter={requireAuth(this.props.loggedIn)} />

Answer 2

您无法更改ReactJS提供的语法正如在React Doc中提到的，我们必须使用这个

onEnter（nextState，replace，callback？）

即将输入路线时调用。它提供下一个路由器状态和重定向到另一个路径的功能。这将是触发钩子的路由实例。

如果将回调列为第三个参数，则此挂钩将异步运行，转换将阻塞，直到调用回调。

PFA参考：https://github.com/reactjs/react-router/blob/master/docs/API.md#onenternextstate-replace-callback

Answer 3

var requireAuth=(loggedIn)=>(nextState,replace)=>{
     console.log(loggedIn)
}

<Route onEnter={(props) => requireAuth(props)} />

注意传递直播道具的重要性，否则道具可能代表旧状态

将自定义参数传递给react-router onEnter函数

3 个答案: