aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/vendor/react-router/docs/api/components/Redirect.md
blob: a31222a0d9bffc11193dd6be0236a9c6931d68c1 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
API: `Redirect` (component)
===========================

Configures a redirect for a path in your route declarations.

Props
-----

### `from`

The path you want to redirect from, including dynamic segments. Defaults
to `*` so you can redirect anything not found to somewhere else.

### `to`

The `name` of the route you want to redirect to.

Example
-------

```xml
<!--
  lets say we want to change from `/profile/123` to `/about/123`
  and redirect `/get-in-touch` to `/contact`
-->
<Routes>
  <Route handler={App}>
    <Route name="contact" handler={Contact}/>
    <Route name="about-user" path="about/:userId" handler={UserProfile}/>
    <Route name="course" path="course/:courseId">
      <Route name="course-dashboard" path="dashboard" handler={Dashboard}/>
      <Route name="course-assignments" path="assignments" handler={Assignments}/>
      <!--
        anything like `/course/123/invalid` redirects to
        `/course/123/dashboard`
      -->
      <Redirect to="course-dashboard" />
    </Route>
  </Route>
  
  <!-- `/get-in-touch` -> `/contact` -->
  <Redirect from="get-in-touch" to="contact" />
  <!-- `/profile/123` -> `/about/123` -->
  <Redirect from="profile/:userId" to="about-user" />
</Routes>
```

Note that the `<Redirect/>` can be placed anywhere in the route
hierarchy, if you'd prefer the redirects to be next to their respective
routes.

```xml
<Routes>
  <Route handler={App}>
    <Route name="contact" handler={Contact}/>
    <Redirect from="get-in-touch" to="contact" />
  </Route>
</Routes>
```