react-router-dom - React Router Dom 嵌套开关问题。点击链接后如何重新渲染？

Question

问题：单击链接按钮时地址栏发生变化，但组件并未实际呈现。我不确定的是它根本没有安装到 DOM 上，还是只是没有从 DOM 中渲染出来。

重现代码：我的代码看起来与此非常相似：

export const AppRouter = () => {
  const isAuth = false;

  return (
    <Switch>
      {!isAuth && (
        <Route path={'/auth'}>
          <NestedSwitchComponent />
        </Route>
      )}
      ){isAuth ? <Redirect to="/" /> : <Redirect to={'/auth'} />}
    </Switch>
  );
};

export const NestedSwitchComponent = () => {
    
    const arrayWithPathsAndComponents = [{
        path: 'login',
        Component: LoginForm
    },{
        path: 'register',
        Component: RegisterForm
    }] 

    return (
    <>
        
        <Link
          to={'/auth/login'}
        >
        <Link
          to={'/auth/register'}
        >
        <Switch>
          {arrayWithPathsAndComponents.map(({ path, Component }) => (
            <Route
                key={path}
                path={"/auth" + path}
                component={Component}
            ></Route>
           ))}
        </Switch>
    </>)
};

标签： react-router-dom