如何在反应路由器 dom 版本 6 中创建私有路由？

Question

//prtvate route in react router dom version 6    

function PrivateRoute({ children, ...rest }) {
  let auth = useAuth();
  return (
    <Route
      {...rest}
      render={() => auth
        ? children
        : <Redirect to="/login" />
      }
    />
  );
}

function App() {
  return (
    <BrowserRouter>
      <Route path="/" component={Public} />
      <PrivateRoute path="/private" component={Private} />
      //private route
    </BrowserRouter>
  );
}

Answer 1

在 React Router Dom v6 中，您必须使用<Navigate to="/login" />而不是<Redirect to="/login" />