Question

我是 React js 的新手。如果未登录到登录页面，我想重定向用户。这是我的代码：

PrivateRoute.js 文件

const PrivateRoute = ({ login, component: Component, ...rest }) => {
  console.log(login);
  return (
    <React.Fragment>
      <Route
        {...rest}
        render={(props) =>
          !login ? <Redirect to="/signin" /> : <Component {...props} />
        }
      />
    </React.Fragment>
  );
};

App.js 文件

const [login, setlogin] = useState(false);

 const isLoggedIn = (status) => {
    setlogin(status);
    
  };

return (
<Switch>
        <PrivateRoute login={login} exact path="/">
          <Home />
        </PrivateRoute>
        
        <Route path="/signin">
          <Login isLoggedIn={isLoggedIn} token={(t) => setToken(t)}/>
        </Route>
       
        <PrivateRoute path="/categories">
          <Categories />
        </PrivateRoute>
       
</Switch
)

谁能找到问题所在？

Answer 1

您是否遇到任何错误或功能是否与预期不同？

这有用吗？

建议 2：

在 App.js 文件中

A -> D
A -> B -> D
A -> C -> B -> D

那么，

<PrivateRoute login={login} exact path="/" component ={Home}>

建议 3：

const PrivateRoute = ({ login, component: Component, ...rest }) => { 
console.log(login);
 return !login ? <Redirect to="/signin" /> :<Route {...rest} component ={Component} /> 
};

Answer 2

试试这个：

const PrivateRoute = ({ login, component: Component, ...rest }) => {
  return login ? (
    <Route {...rest} render={props => <Component {...props} />} />
  ) : <Redirect to="/signin" />
}

重定向到登录页面（私人路线）不起作用 |反应路由器 |反应 js

2 个答案: