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

Question

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

我的代码:

<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>

Answer 1

编辑:实际上@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来自官方文档:

Finally, the routing algorithm attempts to match routes in the order they are defined, top to bottom. So, when you have two sibling routes you should be sure the first doesn't match all possible paths that can be matched by the later sibling. For example, don't do this:

<Route path="/comments" ... />
<Redirect from="/comments" ... />