在页面加载上选择的NavLink ActiveClassName

Question

是否可以推动历史记录。用使用效率路由的URL在页面加载上维护选定的navLink？

navigation.tsx

export const Navigation = ({ userId }: { userId: Id }) => {
  const [ownEvents, setOwnEvents] = useState<EventsPerMonth[]>();
  const [attendedEvents, setAttendedEvents] = useState<EventsPerMonth[]>();
  const { url, path } = useRouteMatch();
  const { push } = useHistory()

  useEffect(() => {
    getCreatedEventsByUserId(userId).then(setOwnEvents);
    getAssistedEventsByUserId(userId).then(setAttendedEvents);
    push(`${url}/created-events`);
  }, [userId, push, url]);

  return (
    <>
      <StyledNavigation>
        <ul>
          <li>
            <StyledNavLink to={`${url}/created-events`} activeClassName="any">
              Eventos creados
            </StyledNavLink>
          </li>
          <li>
            <StyledNavLink to={`${url}/assisted-events`} activeClassName="any">
              Eventos asistidos
            </StyledNavLink>
          </li>
        </ul>
      </StyledNavigation>

      <Switch>
        <ProtectedRoute exact path={`${path}/created-events`}>
          {attendedEvents && <EventsList events={attendedEvents} />}
        </ProtectedRoute>
        <ProtectedRoute exact path={`${path}/assisted-events`}>
          {ownEvents && <EventsList events={ownEvents} />}
        </ProtectedRoute>
      </Switch>
    </>
  );
};

允许？

useEffect(() => {
    getCreatedEventsByUserId(userId).then(setOwnEvents);
    getAssistedEventsByUserId(userId).then(setAttendedEvents);
    push(`${url}/created-events`);
  }, [userId, push, url]);

还有其他方法吗？
谢谢！

Answer 1

从使用挂钩上发出导航操作是完全有效并允许的。但是，由于似乎此导航组件实际上只是调用一些API来填充某些本地状态，并且无条件导航到其中一条路线，所以我可能建议使用重定向（替换）而不是导航（推动）操作，以帮助减少历史记录堆栈的条目。

const { replace } = useHistory();

useEffect(() => {
  getCreatedEventsByUserId(userId).then(setOwnEvents);
  getAssistedEventsByUserId(userId).then(setAttendedEvents);
  replace(`${url}/created-events`);
}, [userId, history, url]);

实际上，此重定向似乎只能使用户进入子路由。您可以将redirect渲染，以从路径重定向到“ {path}/create-events”。

useEffect(() => {
  getCreatedEventsByUserId(userId).then(setOwnEvents);
  getAssistedEventsByUserId(userId).then(setAttendedEvents);
}, [userId, history, url]);

...

<Switch>
  <ProtectedRoute exact path={`${path}/created-events`}>
    {attendedEvents && <EventsList events={attendedEvents} />}
  </ProtectedRoute>
  <ProtectedRoute exact path={`${path}/assisted-events`}>
    {ownEvents && <EventsList events={ownEvents} />}
  </ProtectedRoute>
  <Redirect to={`${path}/created-events`} />
</Switch>