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

Question

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

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

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}。第一个方法是重定向，但是这个函数会被反复调用，而且不会结束。第二个函数就是不起作用(我的open help函数从不运行)。

我正在使用reach-router，但我认为这个问题与JS有关。

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钩子进行并导航

​

​