javascript - 如果满足条件，则重新路由用户

Question

我试图在我的路由器中添加一个条件，如果用户是第一次使用应用程序，它会重定向用户。当用户登录时，返回的对象的属性firstTime可以是真或假。

我正在尝试使用三元运算符，如下所示：

const ClientRoutes = ({ openHelp }) => {
  const firstTime = true;

  return (
    <div>
      <Location>
        {({ location }) => (
          <Router location={location} primary={false}>

            {firstTime ? navigate("/welcome") : null}

            <ClientDocFolders path="/" />
            <WelcomePageContainer path="/welcome" />
            <ErrorNotFound default />
          </Router>
        )}
      </Location>
    </div>
  );
};

export default withClient(ClientRoutes);

这给了我一个错误说： Error: Objects are not valid as a React child 我也尝试用这样navigate("/welcome")的函数调用替换 :{firstTime ? openHelp() : null}或{firstTime ? ()=> openHelp() : null}. 这些中的第一个用于重定向我，但是该函数被无休止地反复调用。第二个功能不起作用（我的开放帮助功能永远不会运行）。

我正在使用到达路由器，但我认为这个问题与 JS 有关。

标签： javascriptreactjsrouting

Answer 1

您可以使用Redirect组件进行重定向，localStorage并可用于保存用户状态。

或者你可以使用useEffect钩子来导航。

注意：localStorage将数据保存在客户端，用户可以随时删除这些数据，所以我建议将数据保存在一些后端数据库中。

const App = () => {
  useEffect(() => {
    const isNewUser = localStorage.getItem("isNewUser")
      ? localStorage.getItem("isNewUser")
      : localStorage.setItem("isNewUser", false);
    if (!isNewUser) {
      navigate("/welcome");
    }
  });

  return (
    <div>
      <h1>Tutorial!</h1>
      <nav>
        <Link to="/">Home</Link>
        <Link to="dashboard">Dashboard</Link>
      </nav>
      <br />
      <Router primary="{false}">
          <ClientDocFolders path="/" />
          <WelcomePageContainer path="/welcome" />
          <ErrorNotFound default />
      </Router>
    </div>
  );
};

没有 React Hook

使用 React Hook 和导航