aboutsummaryrefslogtreecommitdiffstats
path: root/web/src/vendor/react-router/docs/api/components/DefaultRoute.md
blob: 6607832be435fc0c11f1628223ef212f5143b9bc (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
API: `DefaultRoute` (component)
===============================

A route that is active when the parent route's path matches exactly. Or,
in other words, the default child route for a parent.

Note, this is not a `NotFoundRoute`. It is only active when the parent's
route path is matched exactly.

Props
-----

See [Route::props][routeProps]

Example
-------

```xml
<Routes>
  <Route path="/" handler={App}>

    <!--
      when the url is `/`, this handler will be active, or in other
      words, will be `this.props.activeRouteHandler in the `App` handler
    -->
    <DefaultRoute handler={Home}/>

    <Route name="about" handler={About}/>
    <Route name="users" handler={Users}>
      <Route name="user" handler={User} path="/user/:id"/>

      <!-- when the url is `/users`, this will be active -->
      <DefaultRoute handler={UsersIndex}/>

    </Route>
  </Route>
</Routes>
```

This is all really just a shortcut for the less intuitive version of the
same functionality:

```xml
<!-- no path or name on what was previously the "users" route -->
<Route handler={Users}>
  <!-- the path moved down to the child -->
  <Route name="users-index" path="/users" handler={UsersIndex}/>
  <Route name="user" handler={User} path="/user/:id"/>
</Route>
```

`DefaultRoute` feels more natural, so you can name and transition to the
parent route.

  [routeProps]:/docs/api/components/Route.md#props