You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/upgrading/v5.md
+5-4Lines changed: 5 additions & 4 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,16 +7,14 @@ order: 1
7
7
8
8
## Backwards Compatibility Package
9
9
10
-
Instead of upgrading and updating all of your code at once (which is incredibly difficult and prone to bugs), the backwards compatibility package enables you to upgrade one component, one hook, and one route at a time by running both v5 and v6 in parallel. Any code you haven't touched is still running the very same code it was before. Once all components are exclusively using the v6 APIs, your app no longer needs the compatibility package and is running on v6. The official guide can be found [here](../../packages/react-router-dom-v5-compat/README.md).
10
+
Instead of upgrading and updating all of your code at once (which is incredibly difficult and prone to bugs), the backwards compatibility package enables you to upgrade one component, one hook, and one route at a time by running both v5 and v6 in parallel. Any code you haven't touched is still running the very same code it was before. Once all components are exclusively using the v6 APIs, your app no longer needs the compatibility package and is running on v6. The official guide can be found [here][upgrading].
11
11
12
12
We recommend using the backwards compatibility package to upgrade apps that have more than a few routes. Otherwise, we hope this guide will help you do the upgrade all at once!
13
13
14
14
## Introduction
15
15
16
16
React Router version 6 introduces several powerful new features, as well as improved compatibility with the latest versions of React. It also introduces a few breaking changes from version 5. This document is a comprehensive guide on how to upgrade your v4/5 app to v6 while hopefully being able to ship as often as possible as you go.
17
17
18
-
If you are just getting started with React Router, or you'd like to try out v6 in a new app, please see [the Getting Started guide](../getting-started/installation.md).
19
-
20
18
The examples in this guide will show code samples of how you might have built something in a v5 app, followed by how you would accomplish the same thing in v6. There will also be an explanation of why we made this change and how it's going to improve both your code and the overall user experience of people who are using your app.
21
19
22
20
In general, the process looks like this:
@@ -887,7 +885,7 @@ This change was made both to follow more closely the convention established by t
887
885
-`useRouteMatch({ sensitive })` is now `useMatch({ caseSensitive })`
888
886
- It returns a match object with a different shape
889
887
890
-
To see the exact API of the new `useMatch` hook and its type declaration, check out our [API Reference](../api.md#usematch). <!-- TODO: Show examples for refactoring useRouteMatch -->
888
+
To see the exact API of the new `useMatch` hook and its type declaration, check out our [API Reference][usematch]. <!-- TODO: Show examples for refactoring useRouteMatch -->
891
889
892
890
## `<Prompt>` is not currently supported
893
891
@@ -898,3 +896,6 @@ To see the exact API of the new `useMatch` hook and its type declaration, check
898
896
Despite our best attempts at being thorough, it's very likely that we missed something. If you follow this upgrade guide and find that to be the case, please let us know. We are happy to help you figure out what to do with your v5 code to be able to upgrade and take advantage of all of the cool stuff in v6.
Copy file name to clipboardExpand all lines: docs/utils/create-routes-from-children.md
+4-1Lines changed: 4 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -23,4 +23,7 @@ interface RouteObject {
23
23
24
24
</details>
25
25
26
-
`createRoutesFromChildren` is a helper that creates route objects from `<Route>` elements. It is used internally in a [`<Routes>` element](#routes-and-route) to generate a route config from its [`<Route>`](#routes-and-route) children.
26
+
`createRoutesFromChildren` is a helper that creates route objects from `<Route>` elements. It is used internally in a [`<Routes>` element][routes] to generate a route config from its [`<Route>`][route] children.
Copy file name to clipboardExpand all lines: docs/utils/match-path.md
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -32,4 +32,6 @@ interface PathPattern {
32
32
33
33
`matchPath` matches a route path pattern against a URL pathname and returns information about the match. This is useful whenever you need to manually run the router's matching algorithm to determine if a route path matches or not. It returns `null` if the pattern does not match the given pathname.
34
34
35
-
The [`useMatch` hook](#usematch) uses this function internally to match a route path relative to the current location.
35
+
The [`useMatch` hook][usematch] uses this function internally to match a route path relative to the current location.
`matchRoutes` runs the route matching algorithm for a set of routes against a given [`location`](#location) to see which routes (if any) match. If it finds a match, an array of `RouteMatch` objects is returned, one for each route that matched.
26
+
`matchRoutes` runs the route matching algorithm for a set of routes against a given [`location`][location] to see which routes (if any) match. If it finds a match, an array of `RouteMatch` objects is returned, one for each route that matched.
27
27
28
-
This is the heart of React Router's matching algorithm. It is used internally by [`useRoutes`](#useroutes) and the [`<Routes>` component](#routes-and-route) to determine which routes match the current location. It can also be useful in some situations where you want to manually match a set of routes.
28
+
This is the heart of React Router's matching algorithm. It is used internally by [`useRoutes`][useroutes] and the [`<Routes>` component][routes] to determine which routes match the current location. It can also be useful in some situations where you want to manually match a set of routes.
Copy file name to clipboardExpand all lines: docs/utils/resolve-path.md
+3-1Lines changed: 3 additions & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -26,4 +26,6 @@ interface Path {
26
26
27
27
`resolvePath` resolves a given `To` value into an actual `Path` object with an absolute `pathname`. This is useful whenever you need to know the exact path for a relative `To` value. For example, the `<Link>` component uses this function to know the actual URL it points to.
28
28
29
-
The [`useResolvedPath` hook](#useresolvedpath) uses `resolvePath` internally to resolve the pathname. If `to` contains a pathname, it is resolved against the current route pathname. Otherwise, it is resolved against the current URL (`location.pathname`).
29
+
The [`useResolvedPath` hook][useresolvedpath] uses `resolvePath` internally to resolve the pathname. If `to` contains a pathname, it is resolved against the current route pathname. Otherwise, it is resolved against the current URL (`location.pathname`).
0 commit comments