reactjs - onEnter 属性在所有组件上触发

我正在寻求有关我的 react 路由器 onEnter Prop 的帮助。似乎 onEnter Prop 在我的应用程序中的每个组件上触发，尽管我没有指定事件。
很确定这与我的路由器设置有关。

我的代码:

<Provider store={store}>
<Router history={browserHistory}>
  <Route path="/" component={App}>
    <Route
      path="/1"
      components={{ main: Hierarchy, sidebar: NavBar }}
      onEnter={AWSApi.tokenIsValid(authHeader)}
    />
    <Route
      path="/2"
      components={{ main: Entities, sidebar: NavBar }}
      onEnter={AWSApi.tokenIsValid(authHeader)}
    />
    <Route
      path="/2/:id"
      component={Analysis}
      onEnter={AWSApi.tokenIsValid(authHeader)}
    />
    <Route path="/1/:id" component={Entity} onEnter={AWSApi.tokenIsValid(authHeader)} />
  </Route>
  <Route path="/login" component={AuthForm} />
  <Route path="/new-password" component={ChangePasswordForm} />
</Router>

最佳答案

编辑: 实际上 @bennygenel 发现了您在每条路线上进行身份验证时遇到的问题。但是您的路由还有另一个问题，我将在下面介绍:

您定义路由的顺序有问题。

例如，如果您访问 /login 路由将满足 <Route path="/" /> 并输入。同样，访问 /1/ABC 将满足 <Route path="/1" /> 并输入。通常，您应该先定义更严格/更具体的路由，然后才是更通用的路由。

你应该像这样定义它们:

<Router history={browserHistory}>
  <Route path="/login" component={AuthForm} />
  <Route path="/new-password" component={ChangePasswordForm} />
  <Route path="/" component={App}>
    <Route path="/1/:id" component={Entity} onEnter={() => AWSApi.tokenIsValid(authHeader)} />
    <Route
      path="/1"
      components={{ main: Hierarchy, sidebar: NavBar }}
      onEnter={() => AWSApi.tokenIsValid(authHeader)}
    />
    <Route
      path="/2/:id"
      component={Analysis}
      onEnter={() => AWSApi.tokenIsValid(authHeader)}
    />
    <Route
      path="/2"
      components={{ main: Entities, sidebar: NavBar }}
      onEnter={() => AWSApi.tokenIsValid(authHeader)}
    />
  </Route>
</Router>

您应该从官方文档中查看 the Precedence section :

关于reactjs - onEnter 属性在所有组件上触发，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46277940/