React Router 保护路由

Question

我正在学习 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: "/" } };

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

Answer 1

|| 是逻辑或运算符

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

这就是说，如果 location.state 不为 null 或未定义，则将 location.state.from 赋值给变量 from，否则赋值 { pathname: "/" }

React Router 保护路由

React Router protected routes

javascript

router

protected

object

reactjs