react-router#useParams TypeScript Examples

/**
 * 获取群组面板的参数
 */
export function useGroupPanelParams(): {
  groupId: string;
  panelId: string;
} {
  const { groupId, panelId } = useParams<{
    groupId: string;
    panelId: string;
  }>();

  return { groupId, panelId };
}

TourLauncher: FC = () => {
    const { tour } = useParams<{ tour: string }>();
    const [{ running }, { start }] = useTour();

    useEffect(() => {
        if (start && !running) {
            start(tour);
            return;
        }
    });

    return running ? <Redirect to="/" /> : null;
}

export default function AppContextProvider ( props: any ) {
  const { appId } = useParams<RouteParams>();
  const router = useHistory();
  const location = useLocation();

  const { app, loading, setApp: setOriginalApp } = useAppAPI(appId);

  const setApp = (newAppId: string) => {
    const newPath = location.pathname.replace( appId, newAppId ) + location.search + location.hash;
    router.push( newPath );
  }

  const forceRefreshApp = ( newApp: App ) => {
    setOriginalApp( { ...app, ...newApp} );
  }

  return (
    <AppContext.Provider value={ { appId, app, loading, setApp, forceRefreshApp }}>
      {props.children}
    </AppContext.Provider>
  )
}

EnhancedMembers: VFC = () => {
  const { orgCode = '' } = useParams();
  const [users, setUsers] = useState<User[]>([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    const load = async (): Promise<void> => {
      setIsLoading(true);

      try {
        const usersData = await getMembers(orgCode);
        setUsers(usersData);
      } catch (err) {
        throw new Error(`organization '${orgCode}' not exists`);
      } finally {
        setIsLoading(false);
      }
    };

    void load();
  }, [orgCode]);

  return <Members {...{ orgCode, users, isLoading }} />;
}

useMetadataField = (): UseMetadataField => {
  const navigate = useNavigate();
  const { codeHash: codeHashUrlParam } = useParams<{ codeHash: string }>();

  const [file, setFile] = useState<OrFalsy<FileState>>(null);

  const codeBundleQuery = useCodeBundle(codeHashUrlParam || '');
  const codeBundle = codeBundleQuery.data;
  const metadata = useMetadata(codeBundle?.document?.abi, {
    isWasmRequired: !codeBundle,
    onChange: setFile,
  });

  const isLoading = useMemo(
    () => !!codeHashUrlParam && codeBundleQuery.isLoading,
    [codeHashUrlParam, codeBundleQuery.isLoading]
  );

  const isStored = useMemo((): boolean => !!codeBundle?.document, [codeBundle?.document]);

  useEffect((): void => {
    if (codeHashUrlParam && !codeBundleQuery.isValid) {
      navigate(`/instantiate/${codeHashUrlParam}`);
    }
  }, [codeHashUrlParam, codeBundleQuery.isValid, navigate]);

  return {
    file,
    isLoading,
    isStored,
    ...metadata,
  };
}

ResetPassword = () => {
  const dispatch = useDispatch()
  let { token } = useParams()
  const loading = useSelector((state: State) => state.loading)

  const resetPasswordCallback = async (resetPasswordInputs: ResetPasswordInputs) => {
    dispatch(resetPassword({ ...resetPasswordInputs, token }))
  }

  return <ResetPasswordView resetPasswordCallback={resetPasswordCallback} loading={loading} />
}

CapsulePage = (): JSX.Element => {
  const dispatch = useDispatch();

  const { capsuleId } = useParams<any>();
  const [capsule, setCapsule] = useState<CapsuleType | null>(null);

  const updateCapsule = async () => {
    dispatch(setAddress(await getAddress()));
    setCapsule(await getCapsule(capsuleId));
  };

  useEffect(() => {
    updateCapsule();

    (window as any).ethereum.on("chainChanged", async () => {
      await updateCapsule();
    });
  }, []);

  return (
    <StyledCapsulePage>
      <Noise />
      <Gradient />
      <CapsulePageContent>
        {!capsule && <Loading />}
        {capsule && (
          <CapsuleOverview capsule={capsule} update={() => updateCapsule()} />
        )}
        {capsule && (
          <Details>
            <CapsuleDetails capsule={capsule} update={() => updateCapsule()} />
            <CapsuleAssets capsule={capsule} update={() => updateCapsule()} />
          </Details>
        )}
      </CapsulePageContent>
    </StyledCapsulePage>
  );
}

export function useSelectedSubRoute(subRoutes: SubRoute[]): {
  index: number;
  route: SubRoute;
  element: JSX.Element;
} {
  const params = useParams();

  const routes = subRoutes.map(({ path, children }) => ({
    caseSensitive: false,
    path: `${path}/*`,
    element: children,
  }));

  // TODO: remove once react-router updated
  const sortedRoutes = routes.sort((a, b) =>
    // remove "/*" symbols from path end before comparing
    b.path.replace(/\/\*$/, '').localeCompare(a.path.replace(/\/\*$/, '')),
  );

  const element = useRoutes(sortedRoutes) ?? subRoutes[0].children;

  const [matchedRoute] = matchRoutes(sortedRoutes, `/${params['*']}`) ?? [];
  const foundIndex = matchedRoute
    ? subRoutes.findIndex(t => `${t.path}/*` === matchedRoute.route.path)
    : 0;

  return {
    index: foundIndex === -1 ? 0 : foundIndex,
    element,
    route: subRoutes[foundIndex] ?? subRoutes[0],
  };
}

ExistingQueryLoader = observer(() => {
  const queryStore = useLegendQueryStore();
  const params = useParams<ExistingQueryPathParams>();

  useEffect(() => {
    queryStore.setupExistingQueryInfoState(params);
  }, [queryStore, params]);

  return <QueryEditor />;
})

DatasetList: FC<Props> = props => {
  const dispatch = useDispatch()
  const params = useParams<{ id: string }>()
  const datasetList = useSelector((state: any) =>
    module.selectors.getDatasetList(state, params.id)
  )

  const selectedDatasetId = useSelector(module.selectors.getSelectedDatasetId)

  const changeSelected = (id: string) => {
    dispatch(module.actions.setSelectedDataset(id))
  }

  return (
    <div className="dataset-list">
      <div className="title">数据集</div>
      <div className="list">
        {datasetList.map((dataset: DatasetListItem, index: number) => {
          return (
            <div
              key={index}
              className={
                selectedDatasetId === dataset.id ? 'item selected' : 'item'
              }
              onClick={() => {
                changeSelected(dataset.id)
              }}
            >
              <DatasetIcon />
              <span>{dataset.name}</span>
            </div>
          )
        })}
      </div>
    </div>
  )
}

ServiceQueryLoader = observer(() => {
  const applicationStore = useApplicationStore();
  const queryStore = useLegendQueryStore();
  const params = useParams<ServiceQueryPathParams>();
  const queryParams = getQueryParameters<ServiceQueryQueryParams>(
    applicationStore.navigator.getCurrentLocation(),
    true,
  );

  useEffect(() => {
    queryStore.setupServiceQueryInfoState(params, queryParams.key);
  }, [queryStore, params, queryParams]);

  return <QueryEditor />;
})

InviteRoute: React.FC = React.memo(() => {
  const { inviteCode } = useParams<{ inviteCode: string }>();
  useRecordMeasure('AppInviteRenderStart');

  return (
    <PortalHost>
      <div className="h-full w-full bg-gray-600 flex justify-center items-center tc-background">
        <div className="w-96 p-4 rounded-lg shadow-lg bg-black bg-opacity-60 text-center">
          <InviteInfo inviteCode={inviteCode} />
        </div>
      </div>
    </PortalHost>
  );
})

useRedirectMigratedContent = ({ type }: { type: 'channel' | 'video' | 'embedded-video' }) => {
  const { id } = useParams() as { id?: string }
  const navigate = useNavigate()

  useEffect(() => {
    if (type !== 'channel' || !id || BUILD_ENV !== 'production') return

    const mapping = migratedContentIdMappings.channelIdsMapEntries
    const migratedId = mapping[id as keyof typeof mapping]

    if (!migratedId) return

    navigate(absoluteRoutes.viewer.channel(migratedId))
  }, [id, navigate, type])

  useEffect(() => {
    if ((type !== 'video' && type !== 'embedded-video') || !id || BUILD_ENV !== 'production') return

    const mapping = migratedContentIdMappings.videoIdsMapEntries
    const migratedId = mapping[id as keyof typeof mapping]

    if (!migratedId) return

    if (type === 'embedded-video') {
      navigate(absoluteRoutes.embedded.video(migratedId))
    } else {
      navigate(absoluteRoutes.viewer.video(migratedId))
    }
  }, [id, navigate, type])
}

GroupPanelRedirect: React.FC = React.memo(() => {
  const { groupId } = useParams<{
    groupId: string;
  }>();
  const history = useHistory();

  const groupInfo = useGroupInfo(groupId);
  useEffect(() => {
    if (!Array.isArray(groupInfo?.panels) || groupInfo?.panels.length === 0) {
      return;
    }

    const firstAvailablePanel = groupInfo?.panels.find(
      (panel) => panel.type !== GroupPanelType.GROUP
    );
    if (!_isNil(firstAvailablePanel)) {
      history.replace(`/main/group/${groupId}/${firstAvailablePanel.id}`);
    }
  }, [groupInfo]);

  return null;
})

NoteView: React.FC = () => {
  const history = useHistory()
  const { id } = useParams<{ id: string }>()
  const noteState = useAsync(async () => {
    const settings = await getSettings()
    if (!settings) {
      history.push('/')
      return
    }
    noteViewState.settings = settings
    config.token = settings.token
    config.port = settings.port
    const note = await noteApi.get(id, ['id', 'title', 'body'])
    document.title = JoplinNoteUtil.trimTitleStart(note.title)
    const resourceList = await noteApi.resourcesById(id)
    return {
      ...note,
      resourceList,
    } as RenderNote
  })

  async function onClick() {
    await noteActionApi.openAndWatch(id)
  }

  return (
    <div className={css.noteView}>
      <button onClick={onClick} className={css.control}>
        在编辑器中打开
      </button>
      <div>{noteState.value && <MarkdownView note={noteState.value} />}</div>
    </div>
  )
}

Sidebar: React.FC = React.memo(() => {
  const { groupId } = useParams<GroupParams>();
  const groupInfo = useGroupInfo(groupId);
  const groupPanels = groupInfo?.panels ?? [];

  return (
    <CommonSidebarWrapper data-tc-role="sidebar-group">
      <GroupHeader groupId={groupId} />

      <div className="p-2 space-y-1 overflow-auto">
        {groupPanels
          .filter((panel) => !isValidStr(panel.parentId))
          .map((panel) =>
            panel.type === GroupPanelType.GROUP ? (
              <GroupSection key={panel.id} header={panel.name}>
                {groupPanels
                  .filter((sub) => sub.parentId === panel.id)
                  .map((sub) => (
                    <SidebarItem key={sub.id} groupId={groupId} panel={sub} />
                  ))}
              </GroupSection>
            ) : (
              <SidebarItem key={panel.id} groupId={groupId} panel={panel} />
            )
          )}
      </div>
    </CommonSidebarWrapper>
  );
})

export function Channel() {
	const [messages, setMessages] = useState([] as GETChannel);
	const { app_id } = useParams() as { app_id: string };

	useEffect(() => {
		getChannel(app_id).then(setMessages);
	}, []);

	const nub = () => {
		let lastAuthorID: number;
		const nubbed: JSX.Element[] = [];

		messages.forEach(message => {
			nubbed.push(<ChannelMessage
				message={message}
				showUsername={lastAuthorID != message.author.id}
			/>);
			lastAuthorID = message.author.id;
		});

		return nubbed;
	}

	return (
		<div className="channel">
			<h1>Channel</h1>

			{nub()}
		</div>
	);
}

Documentation = () => {

  const [documentation, setDocumentation] = useState("");
  const classes = useStyles();
  const { topic } = useParams();
  const layoutContext = useContext(LayoutContext);

  useEffect(() => {
    layoutContext.setLoading(true);
    DocumentationService.getDocumentation(topic).then((res: string) => {

      setDocumentation(res);
      layoutContext.setLoading(false);
    }).catch(() => layoutContext.setLoading(false));

  }, []);

  useEffect(() => {
    fixImages();
    setTimeout(() => hljs.initHighlighting(), 500);
  }, [documentation]);


  return (
    <Box>
      <Paper id="doc-container" className={classes.root}>
        <Typography variant="h2">Documentation</Typography>
        <ReactMarkdown source={documentation} />
      </Paper>
    </Box >
  );
}

useBroadcast = () => {
  const { broadcastId } = useParams<{ broadcastId: string }>();

  const { data, loading, error, get } = useFetch(
    `/api/broadcasts/${broadcastId}`,
    {
      method: 'GET',
      data: { broadcast: defaultBroadcast },
    },
    [broadcastId]
  );

  return {
    data,
    loading,
    error,
    get,
  };
}

ViewOnMarketplace: React.FC = () => {
  const [t] = useTranslation();
  const { id: waifuId } = useParams<ParamProps>();
  const globals = useSelector(selectGlobalsData);

  const waifuMarketplaceLink = useMemo(
    () => globals.getWaifuMarketplaceLink(waifuId),
    [globals, waifuId]
  );

  return (
    <a href={waifuMarketplaceLink} target="_blank" rel="noreferrer">
      <ViewOnMarketplaceButton primary small>
        {t("waifuDetail.viewOnMarketplace")}
      </ViewOnMarketplaceButton>
    </a>
  );
}

SetupInner = observer(() => {
  const params = useParams<SetupPathParams>();
  const setupStore = useSetupStore();
  const applicationStore = useApplicationStore();
  useEffect(() => {
    setupStore.setCurrentProjectId(params.projectId);
    setupStore.init(params.workspaceId, params.groupWorkspaceId);
  }, [setupStore, params]);

  useEffect(() => {
    flowResult(setupStore.fetchProjects()).catch(
      applicationStore.alertUnhandledError,
    );
    if (setupStore.currentProjectId) {
      flowResult(setupStore.fetchWorkspaces(setupStore.currentProjectId)).catch(
        applicationStore.alertUnhandledError,
      );
    }
  }, [applicationStore, setupStore]);

  useApplicationNavigationContext(
    LEGEND_STUDIO_APPLICATION_NAVIGATION_CONTEXT.SETUP,
  );

  return <SetupSelection />;
})

export function Listing() {
    const [bookingsPage, setBookingsPage] = useState(1);
    const [checkInDate, setCheckInDate] = useState<Moment | null>(null);
    const [checkOutDate, setCheckOutDate] = useState<Moment | null>(null);
    const { listingId } = useParams();
    const { loading, data, error } = useQuery<ListingData, ListingVariables>(
        LISTING,
        {
            variables: {
                id: listingId ?? "",
                bookingsPage: bookingsPage,
                limit: PAGE_LIMIT,
            },
        }
    );

    if (loading) {
        return (
            <Content className="listing">
                <PageSkeleton />
            </Content>
        );
    }

    if (error) {
        return (
            <Content className="listing">
                <ErrorBanner description="This listing may not exist or we've encountered an error. Please try again soon!" />
                <PageSkeleton />
            </Content>
        );
    }

    const listing = data ? data.listing : null;
    const listingBookings = listing ? listing.bookings : null;

    const listingDetailsElement = listing ? (
        <ListingDetails listing={listing} />
    ) : null;

    const listingBookingsElement = listingBookings ? (
        <ListingBookings
            listingBookings={listingBookings}
            bookingsPage={bookingsPage}
            limit={PAGE_LIMIT}
            setBookingsPage={setBookingsPage}
        />
    ) : null;

    const listingCreateBookingElement = listing ? (
        <ListingCreateBooking
            price={listing.price}
            checkInDate={checkInDate}
            checkOutDate={checkOutDate}
            setCheckInDate={setCheckInDate}
            setCheckOutDate={setCheckOutDate}
        />
    ) : null;

    return (
        <Content className="listing">
            <Row gutter={24} justify="space-between">
                <Col xs={24} lg={14}>
                    {listingDetailsElement}
                    {listingBookingsElement}
                </Col>
                <Col xs={24} lg={10}>
                    {listingCreateBookingElement}
                </Col>
            </Row>
        </Content>
    );
}

function ViewMessage() {
  const [message, setMessage] = useState<Message>();
  const params = useParams<{ id: string }>();

  useIonViewWillEnter(() => {
    const msg = getMessage(parseInt(params.id, 10));
    setMessage(msg);
  });

  return (
    <IonPage id="view-message-page">
      <IonHeader translucent>
        <IonToolbar>
          <IonButtons slot="start">
            <IonBackButton text="Inbox" defaultHref="/home"></IonBackButton>
          </IonButtons>
        </IonToolbar>
      </IonHeader>

      <IonContent fullscreen>
        {message ? (
          <>
            <IonItem>
              <IonIcon icon={personCircle} color="primary"></IonIcon>
              <IonLabel className="ion-text-wrap">
                <h2>
                  {message.fromName}
                  <span className="date">
                    <IonNote>{message.date}</IonNote>
                  </span>
                </h2>
                <h3>
                  To: <IonNote>Me</IonNote>
                </h3>
              </IonLabel>
            </IonItem>

            <div className="ion-padding">
              <h1>{message.subject}</h1>
              <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
                enim ad minim veniam, quis nostrud exercitation ullamco laboris
                nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                in reprehenderit in voluptate velit esse cillum dolore eu fugiat
                nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                sunt in culpa qui officia deserunt mollit anim id est laborum.
              </p>
            </div>
          </>
        ) : (
          <div>Message not found</div>
        )}
      </IonContent>
    </IonPage>
  );
}

EnhancedMembers: VFC = () => {
  const { orgCode = '' } = useParams();
  const { users, isLoading } = useGetMembers(orgCode);

  return <Members {...{ orgCode, users, isLoading }} />;
}

AppSettingsDomains = () => {
  const { id: appId } = useParams<{ id: string }>();

  const { data, loading } = useAppByIdQuery({
    variables: {
      appId,
    },
  });

  // TODO display error

  if (loading) {
    // TODO nice loading
    return <p>Loading...</p>;
  }

  if (!data?.app) {
    // TODO nice 404
    return <p>App not found.</p>;
  }

  const { app } = data;

  return (
    <>
      <HeaderContainer>
        <Header />
        <AppHeaderInfo app={app} />
        <AppHeaderTabNav app={app} />
      </HeaderContainer>

      <Container maxW="5xl" mt={10}>
        <Grid
          templateColumns={{ sm: 'repeat(1, 1fr)', md: 'repeat(6, 1fr)' }}
          gap={{ sm: 0, md: 16 }}
        >
          <GridItem colSpan={2} py={5}>
            <AppSettingsMenu app={app} />
          </GridItem>
          <GridItem colSpan={4}>
            <AppDomains appId={appId} />
          </GridItem>
        </Grid>
      </Container>
    </>
  );
}

function OrderDetailsPage() {
  const { orderId } = useParams();
  return <OrderDetails orderId={orderId} />;
}

export function User({ viewer }: UserProps) {
    const [listingsPage, setListingsPage] = useState(1);
    const [bookingsPage, setBookingsPage] = useState(1);
    const { userId } = useParams();
    const { data, loading, error } = useQuery<UserData, UserVariables>(USER, {
        variables: {
            id: userId ?? "",
            bookingsPage: bookingsPage,
            listingsPage: listingsPage,
            limit: PAGE_LIMIT,
        },
    });

    if (loading) {
        return (
            <Content className="user">
                <PageSkeleton />
            </Content>
        );
    }

    if (error) {
        return (
            <Content className="user">
                <ErrorBanner description="This user may not exists we've encountered an error. Please try again later" />
                <PageSkeleton />
            </Content>
        );
    }

    const user = data ? data.user : null;
    const viewerIsUser = viewer.id === userId;

    const userListings = user?.listings ?? null;
    const userBookings = user?.bookings ?? null;

    const userProfileElement = user ? (
        <UserProfile user={user} viewerIsUser={viewerIsUser} />
    ) : null;

    const userListingsElement = userListings ? (
        <UserListings
            userListings={userListings}
            page={listingsPage}
            limit={PAGE_LIMIT}
            setListingsPage={setListingsPage}
        />
    ) : null;

    const userBookingsElement = userBookings ? (
        <UserBookings
            userBookings={userBookings}
            page={bookingsPage}
            limit={PAGE_LIMIT}
            setBookingsPage={setBookingsPage}
        />
    ) : null;

    return (
        <Content>
            <Row gutter={12} justify="space-between">
                <Col xs={24}>{userProfileElement}</Col>
                <Col xs={24}>{userBookingsElement}</Col>
                <Col xs={24}>{userListingsElement}</Col>
            </Row>
        </Content>
    );
}

PersonalConverse: React.FC = React.memo(() => {
  const params = useParams<UserConversePanelParams>();

  return <ConversePanel converseId={params.converseId} />;
})

CreateQueryLoader = observer(() => {
  const applicationStore = useApplicationStore();
  const queryStore = useLegendQueryStore();
  const params = useParams<CreateQueryPathParams>();
  const currentMapping = queryStore.queryBuilderState.querySetupState.mapping;
  const currentRuntime =
    queryStore.queryBuilderState.querySetupState.runtime instanceof
    RuntimePointer
      ? queryStore.queryBuilderState.querySetupState.runtime.packageableRuntime
          .value
      : undefined;

  useEffect(() => {
    queryStore.setupCreateQueryInfoState(params);
  }, [queryStore, params]);

  // TODO: this will make the route change as the users select another mapping and runtime
  useEffect(() => {
    if (queryStore.queryInfoState instanceof CreateQueryInfoState) {
      if (
        currentMapping &&
        currentRuntime &&
        (queryStore.queryInfoState.mapping !== currentMapping ||
          queryStore.queryInfoState.runtime !== currentRuntime)
      ) {
        applicationStore.navigator.goTo(
          generateCreateQueryRoute(
            queryStore.queryInfoState.project.groupId,
            queryStore.queryInfoState.project.artifactId,
            queryStore.queryInfoState.versionId,
            currentMapping.path,
            currentRuntime.path,
            undefined,
          ),
        );
      }
    }
  }, [applicationStore, queryStore, currentMapping, currentRuntime]);

  return <QueryEditor />;
})