docs: Updated TSDoc docs links (#8913)

* Fixed TSDoc docs link for react-router components

* Fixed TSDoc docs link for react-router hooks

* Add missing TSDoc docs link for react-router-dom

* Fixed some TSDoc Docs links on react-router

* Signed CLA

contributors.yml

@@ -64,3 +64,4 @@
 - vijaypushkin
 - vikingviolinist
 - xcsnowcity
+- marc2332

packages/react-router-dom/index.tsx

@@ -142,6 +142,8 @@ export interface BrowserRouterProps {
 
 /**
  * A `<Router>` for use in web browsers. Provides the cleanest URLs.
+ * 
+ * @see https://reactrouter.com/docs/en/v6/routers/browser-router
  */
 export function BrowserRouter({
   basename,
@@ -181,6 +183,8 @@ export interface HashRouterProps {
 /**
  * A `<Router>` for use in web browsers. Stores the location in the hash
  * portion of the URL so it is not sent to the server.
+ *
+ * @see https://reactrouter.com/docs/en/v6/routers/hash-router
  */
 export function HashRouter({ basename, children, window }: HashRouterProps) {
   let historyRef = React.useRef<HashHistory>();
@@ -218,6 +222,8 @@ export interface HistoryRouterProps {
  * to note that using your own history object is highly discouraged and may add
  * two versions of the history library to your bundles unless you use the same
  * version of the history library that React Router uses internally.
+ *
+ * @see https://reactrouter.com/docs/en/v6/routers/history-router
  */
 function HistoryRouter({ basename, children, history }: HistoryRouterProps) {
   const [state, setState] = React.useState({
@@ -258,6 +264,8 @@ export interface LinkProps
 
 /**
  * The public API for rendering a history-aware <a>.
+ *
+ * @see https://reactrouter.com/docs/en/v6/components/link
  */
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function LinkWithRef(
@@ -307,6 +315,8 @@ export interface NavLinkProps
 
 /**
  * A <Link> wrapper that knows if it's "active" or not.
+ *
+ * @see https://reactrouter.com/docs/en/v6/components/nav-link
  */
 export const NavLink = React.forwardRef<HTMLAnchorElement, NavLinkProps>(
   function NavLinkWithRef(
@@ -384,6 +394,8 @@ if (__DEV__) {
  * Handles the click behavior for router `<Link>` components. This is useful if
  * you need to create custom `<Link>` components with the same click behavior we
  * use in our exported `<Link>`.
+ *
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-link-click-handler
  */
 export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
   to: To,
@@ -425,6 +437,8 @@ export function useLinkClickHandler<E extends Element = HTMLAnchorElement>(
 /**
  * A convenient wrapper for reading and writing search parameters via the
  * URLSearchParams interface.
+ *
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-search-params
  */
 export function useSearchParams(defaultInit?: URLSearchParamsInit) {
   warning(
@@ -498,6 +512,8 @@ export type URLSearchParamsInit =
  *   let searchParams = createSearchParams({
  *     sort: ['name', 'price']
  *   });
+ *
+ * @see https://reactrouter.com/docs/en/v6/utils/create-search-params
  */
 export function createSearchParams(
   init: URLSearchParamsInit = ""

packages/react-router/lib/components.tsx

@@ -27,7 +27,7 @@ export interface MemoryRouterProps {
 /**
  * A <Router> that stores all entries in memory.
  *
- * @see https://reactrouter.com/docs/en/v6/api#memoryrouter
+ * @see https://reactrouter.com/docs/en/v6/routers/memory-router
  */
 export function MemoryRouter({
   basename,
@@ -72,7 +72,7 @@ export interface NavigateProps {
  * able to use hooks. In functional components, we recommend you use the
  * `useNavigate` hook instead.
  *
- * @see https://reactrouter.com/docs/en/v6/api#navigate
+ * @see https://reactrouter.com/docs/en/v6/components/navigate
  */
 export function Navigate({ to, replace, state }: NavigateProps): null {
   invariant(
@@ -104,7 +104,7 @@ export interface OutletProps {
 /**
  * Renders the child route's element, if there is one.
  *
- * @see https://reactrouter.com/docs/en/v6/api#outlet
+ * @see https://reactrouter.com/docs/en/v6/components/outlet
  */
 export function Outlet(props: OutletProps): React.ReactElement | null {
   return useOutlet(props.context);
@@ -139,7 +139,7 @@ export interface IndexRouteProps {
 /**
  * Declares an element that should be rendered at a certain URL path.
  *
- * @see https://reactrouter.com/docs/en/v6/api#route
+ * @see https://reactrouter.com/docs/en/v6/components/route
  */
 export function Route(
   _props: PathRouteProps | LayoutRouteProps | IndexRouteProps
@@ -167,7 +167,7 @@ export interface RouterProps {
  * router that is more specific to your environment such as a <BrowserRouter>
  * in web browsers or a <StaticRouter> for server rendering.
  *
- * @see https://reactrouter.com/docs/en/v6/api#router
+ * @see https://reactrouter.com/docs/en/v6/routers/router
  */
 export function Router({
   basename: basenameProp = "/",
@@ -247,7 +247,7 @@ export interface RoutesProps {
  * A container for a nested tree of <Route> elements that renders the branch
  * that best matches the current location.
  *
- * @see https://reactrouter.com/docs/en/v6/api#routes
+ * @see https://reactrouter.com/docs/en/v6/components/routes
  */
 export function Routes({
   children,
@@ -265,7 +265,7 @@ export function Routes({
  * either a `<Route>` element or an array of them. Used internally by
  * `<Routes>` to create a route config from its children.
  *
- * @see https://reactrouter.com/docs/en/v6/api#createroutesfromchildren
+ * @see https://reactrouter.com/docs/en/v6/utils/create-routes-from-children
  */
 export function createRoutesFromChildren(
   children: React.ReactNode

packages/react-router/lib/hooks.tsx

@@ -26,7 +26,7 @@ import {
  * Returns the full href for the given "to" value. This is useful for building
  * custom links that are also accessible and preserve right-click behavior.
  *
- * @see https://reactrouter.com/docs/en/v6/api#usehref
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-href
  */
 export function useHref(to: To): string {
   invariant(
@@ -55,7 +55,7 @@ export function useHref(to: To): string {
 /**
  * Returns true if this component is a descendant of a <Router>.
  *
- * @see https://reactrouter.com/docs/en/v6/api#useinroutercontext
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-in-router-context
  */
 export function useInRouterContext(): boolean {
   return React.useContext(LocationContext) != null;
@@ -69,7 +69,7 @@ export function useInRouterContext(): boolean {
  * "routing" in your app, and we'd like to know what your use case is. We may
  * be able to provide something higher-level to better suit your needs.
  *
- * @see https://reactrouter.com/docs/en/v6/api#uselocation
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-location
  */
 export function useLocation(): Location {
   invariant(
@@ -86,7 +86,7 @@ export function useLocation(): Location {
  * Returns the current navigation action which describes how the router came to
  * the current location, either by a pop, push, or replace on the history stack.
  *
- * @see https://reactrouter.com/docs/en/v6/api#usenavigationtype
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-navigation-type
  */
 export function useNavigationType(): NavigationType {
   return React.useContext(LocationContext).navigationType;
@@ -97,7 +97,7 @@ export function useNavigationType(): NavigationType {
  * This is useful for components that need to know "active" state, e.g.
  * <NavLink>.
  *
- * @see https://reactrouter.com/docs/en/v6/api#usematch
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-match
  */
 export function useMatch<
   ParamKey extends ParamParseKey<Path>,
@@ -134,7 +134,7 @@ export interface NavigateOptions {
  * Returns an imperative method for changing the location. Used by <Link>s, but
  * may also be used by other elements to change the location.
  *
- * @see https://reactrouter.com/docs/en/v6/api#usenavigate
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-navigate
  */
 export function useNavigate(): NavigateFunction {
   invariant(
@@ -198,7 +198,7 @@ const OutletContext = React.createContext<unknown>(null);
 /**
  * Returns the context (if provided) for the child route at this level of the route
  * hierarchy.
- * @see https://reactrouter.com/docs/en/v6/api#useoutletcontext
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-outlet-context
  */
 export function useOutletContext<Context = unknown>(): Context {
   return React.useContext(OutletContext) as Context;
@@ -208,7 +208,7 @@ export function useOutletContext<Context = unknown>(): Context {
  * Returns the element for the child route at this level of the route
  * hierarchy. Used internally by <Outlet> to render child routes.
  *
- * @see https://reactrouter.com/docs/en/v6/api#useoutlet
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-outlet
  */
 export function useOutlet(context?: unknown): React.ReactElement | null {
   let outlet = React.useContext(RouteContext).outlet;
@@ -224,7 +224,7 @@ export function useOutlet(context?: unknown): React.ReactElement | null {
  * Returns an object of key/value pairs of the dynamic params from the current
  * URL that were matched by the route path.
  *
- * @see https://reactrouter.com/docs/en/v6/api#useparams
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-params
  */
 export function useParams<
   ParamsOrKey extends string | Record<string, string | undefined> = string
@@ -261,7 +261,7 @@ export function useResolvedPath(to: To): Path {
  * elements in the tree must render an <Outlet> to render their child route's
  * element.
  *
- * @see https://reactrouter.com/docs/en/v6/api#useroutes
+ * @see https://reactrouter.com/docs/en/v6/hooks/use-routes
  */
 export function useRoutes(
   routes: RouteObject[],

packages/react-router/lib/router.ts

@@ -98,7 +98,7 @@ export interface RouteObject {
 /**
  * Returns a path with params interpolated.
  *
- * @see https://reactrouter.com/docs/en/v6/api#generatepath
+ * @see https://reactrouter.com/docs/en/v6/utils/generate-path
  */
 export function generatePath(path: string, params: Params = {}): string {
   return path
@@ -136,7 +136,7 @@ export interface RouteMatch<ParamKey extends string = string> {
 /**
  * Matches the given routes to a location and returns the match data.
  *
- * @see https://reactrouter.com/docs/en/v6/api#matchroutes
+ * @see https://reactrouter.com/docs/en/v6/utils/match-routes
  */
 export function matchRoutes(
   routes: RouteObject[],
@@ -383,7 +383,7 @@ type Mutable<T> = {
  * Performs pattern matching on a URL pathname and returns information about
  * the match.
  *
- * @see https://reactrouter.com/docs/en/v6/api#matchpath
+ * @see https://reactrouter.com/docs/en/v6/utils/match-path
  */
 export function matchPath<
   ParamKey extends ParamParseKey<Path>,
@@ -502,7 +502,7 @@ function safelyDecodeURIComponent(value: string, paramName: string) {
 /**
  * Returns a resolved path object relative to the given pathname.
  *
- * @see https://reactrouter.com/docs/en/v6/api#resolvepath
+ * @see https://reactrouter.com/docs/en/v6/utils/resolve-path
  */
 export function resolvePath(to: To, fromPathname = "/"): Path {
   let {