Components
<Router>
The main router component that wraps all your routes and provides the routing context.
Type:
Router(props: RouterProps): JSX.Element
Parameters:
mode: Optional routing mode, either 'hash' or 'history'. Defaults to 'hash'root: Optional component that wraps the rendered component for all routeschildren: <Route> components to be rendered
Example:
<Router mode="hash" root={RootLayout}>
<Route path="/" component={HomePage} />
<Route path="/about" component={AboutPage} />
</Router>
<Route>
Defines a route and its corresponding component.
Type:
Route(props: RouteProps): JSX.Element
Parameters:
path: The path pattern for this routesensitive: Optional flag to make the path matching case-sensitive. Defaults to falsecomponent: Optional component to render when the route is matchedchildren: Optional nested <Route> components
Example:
// Basic route
<Route path="/about" component={AboutPage} />
// Case-sensitive route
<Route path="/API" sensitive component={ApiPage} />
// Route with nested routes
<Route path="/dashboard" component={DashboardLayout}>
<Route path="/stats" component={StatsPage} />
<Route path="/settings" component={SettingsPage} />
</Route>
// Wildcard route (matches any path)
<Route path="*" component={NotFoundPage} />
<Link>
Creates a navigable link to another route.
Type:
Link(props: LinkProps): JSX.Element
Parameters:
to: The destination path, can include query stringsrelative: Optional flag to navigate to the relative path. Defaults to truereplace: Optional flag to replace the current history entry instead of pushing a new onenoScroll: Optional flag to prevent scrolling to top when navigatingstate: Optional state object to pass to history.state, defaults to nullstyle: Optional CSS stylesclass: Optional CSS class nameactiveClass: Optional CSS class name to apply when the link is activeend: Optional flag to match the path exactly. When set to true, the link will only be active if the current path matches exactlychildren: Optional content for the link
Example:
// Basic link
<Link to="/home">Home</Link>
// Link with absolute path
<Link to="/about" relative={false}>About (Exact)</Link>
// Link with replace
<Link to="/login" replace>Login</Link>
// Link with noScroll
<Link to="/details" noScroll>View Details (No Scroll)</Link>
// Link with styles
<Link to="/contact" style={{ color: 'blue' }}>Contact</Link>
// Link with className
<Link to="/profile" class="user-link">Profile</Link>
// Link with activeClass
<Link to="/dashboard" activeClass="active-nav">Dashboard</Link>
// Link with end prop
<Link to="/settings" end>Settings (Exact Match)</Link>
// Link with query parameters
<Link to="/products?category=electronics&sort=price">Products (Electronics)</Link>
// Link with state
<Link to="/account" state={{ from: 'search', sourceId: 1 }}>
View Product Details
</Link>
