Question

嗨，我正在尝试使用私有路由和减速器进行简单的身份验证，但我的页面没有重定向到登录页面，而是打开了 404 错误页面。并且用户可以通过更改 URL 来打开任何路由。

这是我的应用js

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <PrivateRoute exact path="/" component={MainPage} />
        <PrivateRoute exact path="/product/:id" component={ProductPage} />
        <PrivateRoute exact path="/cart" component={Cart} />
        <Route path="*" component={Error} />
        <Route exact path="/login" component={Login} />
      </Switch>
      <Footer />
    </Router>
  );
}

这是我的私有路由组件，

export default function PrivateRoute({ children , ...rest }) {
  const loggedIn = useSelector((state) => state.Auth.loggedIn);
  return (
    <Route
      {...rest}
      render={({location}) => {
        return loggedIn == true ? children : <Redirect to={{ pathname:'/login', state: {from : location}}}/>
      }}
    ></Route>
  );
}

Answer 1

路线的顺序很重要。

尝试将 Error 路线放在 Switch 内的底部。 Error 路由似乎在您的 Login 有机会之前匹配重定向。

所以尝试这样的事情：

function App() {
  return (
    <Router>
      <Header />
      <Switch>
        <PrivateRoute exact path="/" component={MainPage} />
        <PrivateRoute exact path="/product/:id" component={ProductPage} />
        <PrivateRoute exact path="/cart" component={Cart} />
        <Route exact path="/login" component={Login} />
        <Route path="*" component={Error} />
      </Switch>
      <Footer />
    </Router>
  );
}

此外，我认为您需要将 children 更改为 component，否则重定向将不起作用。

因此，请改为执行以下操作：

function PrivateRoute({ component: Component, ...rest }) {
  const loggedIn = useSelector((state) => state.Auth.loggedIn);
  return (
    <Route
      {...rest}
      render={({ location }) => {
        return loggedIn == true ? (
          <Component />
        ) : (
          <Redirect to={{ pathname: "/login", state: { from: location } }} />
        );
      }}
    ></Route>
  );
}

Answer 2

这对你有用

const PrivateRoute = ({ component: Component, ...rest }) => {
  const loggedIn = useSelector((state) => state.Auth.loggedIn);
  return (
    <Route
      {...rest}
      render={props => (loggedIn ? (
        <Component {...props} />
      ) : (
        <Redirect to={{
          pathname: '/login',
          state: {
            from: props.location
          }
        }}
        />
      )
      )}
    />
  );
};

私有路由重定向到 404 错误页面而不是登录页面

2 个答案: