React Router 受保护的路由

Posted 2023-02-25

【中文标题】React Router 受保护的路由

【英文标题】：React Router protected routes

【发布时间】：2020-10-26 20:00:48

【问题描述】：

我正在学习 React Router（准确地说是受保护的路由），在 React Router 文档中有一个我几乎可以理解的功能，但是有一行代码我看不到它是如何工作的。也许有人可以简短地描述那条线的作用。下面是来自https://reactrouter.com/web/example/auth-workflow的函数

function LoginPage() 
  let history = useHistory();
  let location = useLocation();

  let  from  = location.state ||  from:  pathname: "/"  ;
  let login = () => 
    fakeAuth.authenticate(() => 
        history.replace(from);
    );
  ; 

这条线有什么作用？

let  from  = location.state ||  from:  pathname: "/"  ;

我知道我们正在创建一个对象，但|| 是做什么的？是否将两个对象合二为一？没看懂。

【问题讨论】：

这与受保护的路由、React Router 甚至 React 无关。它是解构的，在location.state 为空或未定义的情况下提供了一个默认值来解构。右侧见***.com/q/2802055/3001761，左侧见***.com/q/26999820/3001761。

【参考方案1】：

|| 是逻辑或运算符

let  from  = location.state ||  from:  pathname: "/"  ;

这就是说，如果location.state 不为空或未定义，则将location.state.from 分配给变量from，否则分配 pathname: "/"