Redirect Component

Relevant source files

The following files were used as context for generating this wiki page:

• src/components/Redirect.tsx
• test/redirect.test.ts
• src/helpers/path-helpers.ts
• README.md
• package.json

The Redirect component is a functional utility in wouter-vue designed to perform declarative navigation. When rendered within the routing tree, it triggers a location change to a specified path without rendering any visible UI elements. It is particularly useful for handling legacy URL aliasing, conditional access control, or routing logic where a user must be moved from one path to another automatically.

This component supports both client-side navigation via the useLocation hook and server-side redirects by updating the ssrContext. It leverages the core routing infrastructure of the library, ensuring consistency with the reactive state of the application.

Sources: src/components/Redirect.tsx:1-12, README.md:14-25

Component Architecture and Logic

The Redirect component is implemented as a Vue component that returns null for its render function. Its primary logic resides within the setup hook, where it interacts with the router state and lifecycle hooks to execute navigation.

Navigation Lifecycle

Navigation is handled differently depending on the environment:

• Client-Side: The component utilizes the onBeforeMount lifecycle hook to trigger navigation as early as possible. This minimizes "flickering" where content from the current route might briefly appear before the redirect occurs.
• Server-Side (SSR): The component synchronously checks for an ssrContext within the router. If present, it sets the redirectTo property, allowing the server-side renderer to issue the appropriate HTTP redirect header.

The diagram shows the logic flow from component initialization to the execution of navigation.
Sources: src/components/Redirect.tsx:38-70, test/redirect.test.ts:98-112

Path Resolution

The component uses internal helpers to determine the destination. It accepts both to and href props, with to taking precedence. Path resolution involves validating that at least one destination prop is provided and warning the developer in non-production environments if both are used or both are missing.

Sources: src/components/Redirect.tsx:30-35, src/helpers/path-helpers.ts:38-51

API Reference

Props

The Redirect component accepts the following properties to control navigation behavior:

Prop	Type	Description
to	Path (string)	The primary target path for the redirect. Takes precedence over href.
href	Path (string)	Alias for to. Used if to is not provided.
replace	boolean	If true, the current history entry is replaced instead of pushing a new one.
state	unknown	Optional state object to be associated with the new history entry.

Sources: src/components/Redirect.tsx:18-24, test/redirect.test.ts:50-55

Internal Dependencies

The component relies on several internal modules to interface with the wouter-vue core:

• useRouter: Retrieves the current router instance from the injection context.
• useLocationFromRouter: Provides the navigate function used for client-side transitions.
• getRouterValue: A helper to access the raw reactive value of the router object.
• PropsResolver: Used to safely extract ssrContext from the router object for server-side operations.

Sources: src/components/Redirect.tsx:11-15, src/components/Redirect.tsx:37-55

Implementation Details

Client-Side Execution

During client-side execution, the navigateFn is called within onBeforeMount. If an error occurs during this process, a developer warning is logged via devWarn.

// src/components/Redirect.tsx:61-69
onBeforeMount(() => {
  try {
    navigateFn(targetPath, { replace: props.replace, state: props.state })
  } catch (error) {
    devWarn(
      'Redirect',
      `Error during redirect navigation: ${error instanceof Error ? error.message : String(error)}`
    )
    throw error
  }
})

Sources: src/components/Redirect.tsx:61-69

Server-Side Rendering (SSR) Integration

The component supports SSR by detecting the ssrContext via the router's computed value. This ensures that the server can handle the redirect logic before sending a response to the client.

The sequence shows how the component identifies and updates the SSR context for server-directed navigation.
Sources: src/components/Redirect.tsx:47-58, test/redirect.test.ts:98-112

Testing and Validation

The component's behavior is verified through several test cases in the suite:

1. Mount Navigation: Ensures that mounting the component changes the current location to the path specified in the to prop.
2. Replace Support: Validates that the replace prop correctly modifies the history stack instead of adding a new entry.
3. Prop Aliasing: Confirms that href works as a valid fallback for the to prop.
4. SSR Context: Verifies that ssrContext.redirectTo is correctly populated during server-side execution.

Sources: test/redirect.test.ts:7-118

Summary

The Redirect component is a lightweight but essential part of the wouter-vue ecosystem. By providing a declarative way to handle navigation, it allows developers to manage complex routing scenarios within the standard Vue component tree. Its integration with both Vue's lifecycle hooks for the browser and context objects for the server makes it a robust solution for universal Vue 3 applications.