使用 react 路由器的精确道具答案

【问题标题】：Usage of exact prop with react router使用 react 路由器的精确道具
【发布时间】：2020-02-20 10:40:20
【问题描述】：

我正在创建一条私有路由，如下所示。

const PrivateRoute = (props) => {
  const { component: Component, path } = props;
  const isAuthenticated = true;

  return (
    <Route
      // exact (1)
      path={path}
      render={() => (
        isAuthenticated
          ? (
            <Component />
          )
          : (
            <Redirect
              to="/"
            />
          ))}
    />
  );
};

我在app js文件中实现如下。

 <Router>
      <Switch>
        <PrivateRoutes
          // exact (2)
          path="/users"
          component={Users}
        />
        <PrivateRoutes
          // exact (3)
          path="/users/add"
          component={AddUser}
        />
      </Switch>
 </Router>

我注意到以下行为是基于我在位置 (1),(2),(3)

中评论 exact 关键字

当 1、2、3 被评论时，AddUser 组件在我转到 /users/add 时可见
当只有 2,3 被评论时，当我转到 /users/add 时，AddUser 组件会给出一个空白屏幕
当只有 1 被注释时，AddUser 组件在我转到 /users/add 时可见
当 1、2、3 被不评论时，AddUser 组件在我转到 /users/add 时可见

我认为我们只需要将确切的关键字传递给我们从 react-router 导入的路由组件。但是在上述任何一种情况下，不放 exact on 导致 AddUsers 组件不呈现。

这种行为的原因是什么？

【问题讨论】：

标签： reactjs react-router react-router-dom

【解决方案1】：

React-router 匹配第一个路由，因此您需要按最复杂的顶部对路由组件进行排序，例如：

/非常/复杂/路线
/非常/复杂
/非常

您的代码中的问题是您没有将组件的...rest 属性传递给您的组件。应该是这样的：

const PrivateRoute = ({ children, ...rest }) => {
 return (
   <Route
     {...rest}
     render={props =>
      auth.isAuthenticated ? (
        children
      ) : (
        <Redirect
          to={{
            pathname: '/login',
            state: { from: props.location },
          }}
        />
       )
     }
   />
  )

请注意，...rest 包含在您的中定义的“精确”道具，因此您不必定义它两次 - 一次在 PrivateRoute 中，一次在 Route 中。因此，当您在 1 而不是 2,3 中指定它时，这无关紧要，但相反，因为“精确”是希望这可以帮助！

【讨论】：