Nested Routing

Nested routes allow you to create hierarchical route structures with automatic parameter merging.

Basic Nested Routes

Enable nested routing with the nest prop:

How it works:

• Parent route matches /users/:userId (e.g., /users/123)
• Child routes are relative to the parent match (/profile → /users/123/profile)
• Parameters are automatically merged from parent to child

Accessing Parameters

In child components:

Via props:

Relative Links

Use ~ prefix for relative links in nested routes:

Complex Nesting

You can nest multiple levels:

URL: /users/123/posts/456/comments/789Params: { userId: '123', postId: '456', commentId: '789' }

Notes

• The nest prop enables nested routing mode
• Child routes are relative to the parent match
• Parameters are automatically merged from parent to child
• Use ~ prefix for relative links in nested routes