INDIE UNPKG

3.81 kBMarkdownView Raw
1---
2title: Navigating
3order: 6
4---
5
6# Navigating
7
8[MODES: framework]
9
10## Introduction
11
12Users navigate your application with `<Link>`, `<NavLink>`, `<Form>`, `redirect`, and `useNavigate`.
13
14## NavLink
15
16This component is for navigation links that need to render active and pending states.
17
18```tsx
19import { NavLink } from "react-router";
20
21export function MyAppNav() {
22 return (
23 <nav>
24 <NavLink to="/" end>
25 Home
26 </NavLink>
27 <NavLink to="/trending" end>
28 Trending Concerts
29 </NavLink>
30 <NavLink to="/concerts">All Concerts</NavLink>
31 <NavLink to="/account">Account</NavLink>
32 </nav>
33 );
34}
35```
36
37`NavLink` renders default class names for different states for easy styling with CSS:
38
39```css
40a.active {
41 color: red;
42}
43
44a.pending {
45 animate: pulse 1s infinite;
46}
47```
48
49It also has callback props on `className`, `style`, and `children` with the states for inline styling or conditional rendering:
50
51```tsx
52// className
53<NavLink
54 to="/messages"
55 className={({ isActive, isPending }) =>
56 [
57 isPending ? "pending" : "",
58 isActive ? "active" : "",
59 ].join(" ")
60 }
61>
62 Messages
63</NavLink>
64```
65
66```tsx
67// style
68<NavLink
69 to="/messages"
70 style={({ isActive, isPending }) => {
71 return {
72 fontWeight: isActive ? "bold" : "",
73 color: isPending ? "red" : "black",
74 };
75 }}
76>
77 Messages
78</NavLink>
79```
80
81```tsx
82// children
83<NavLink to="/tasks">
84 {({ isActive }) => (
85 <span className={isActive ? "active" : ""}>Tasks</span>
86 )}
87</NavLink>
88```
89
90For animated navigations, see [View Transitions](../../how-to/view-transitions). The legacy `isTransitioning` render prop and `transitioning` class are deprecated in favor of React's `<ViewTransition>` component.
91
92## Link
93
94Use `<Link>` when the link doesn't need active styling:
95
96```tsx
97import { Link } from "react-router";
98
99export function LoggedOutMessage() {
100 return (
101 <p>
102 You've been logged out.{" "}
103 <Link to="/login">Login again</Link>
104 </p>
105 );
106}
107```
108
109## Form
110
111The form component can be used to navigate with `URLSearchParams` provided by the user.
112
113```tsx
114<Form action="/search">
115 <input type="text" name="q" />
116</Form>
117```
118
119If the user enters "journey" into the input and submits it, they will navigate to:
120
121```
122/search?q=journey
123```
124
125Forms with `<Form method="post" />` will also navigate to the action prop but will submit the data as `FormData` instead of `URLSearchParams`. However, it is more common to `useFetcher()` to POST form data. See [Using Fetchers](../../how-to/fetchers).
126
127## redirect
128
129Inside of route loaders and actions, you can return a `redirect` to another URL.
130
131```tsx
132import { redirect } from "react-router";
133
134export async function loader({ request }) {
135 let user = await getUser(request);
136 if (!user) {
137 return redirect("/login");
138 }
139 return { userName: user.name };
140}
141```
142
143It is common to redirect to a new record after it has been created:
144
145```tsx
146import { redirect } from "react-router";
147
148export async function action({ request }) {
149 let formData = await request.formData();
150 let project = await createProject(formData);
151 return redirect(`/projects/${project.id}`);
152}
153```
154
155## useNavigate
156
157This hook allows the programmer to navigate the user to a new page without the user interacting. Usage of this hook should be uncommon. It's recommended to use the other APIs in this guide when possible.
158
159Reserve usage of `useNavigate` to situations where the user is _not_ interacting but you need to navigate, for example:
160
161- Logging them out after inactivity
162- Timed UIs like quizzes, etc.
163
164```tsx
165import { useNavigate } from "react-router";
166
167export function useLogoutAfterInactivity() {
168 let navigate = useNavigate();
169
170 useFakeInactivityHook(() => {
171 navigate("/logout");
172 });
173}
174```
175
176---
177
178Next: [Pending UI](./pending-ui)