Emphasize <Link> state changes (#9954)

Author: bbrowning918

contributors.yml

@@ -16,6 +16,7 @@
 - awreese
 - aymanemadidi
 - bavardage
+- bbrowning918
 - BDomzalski
 - bhbs
 - bobziroll

docs/upgrading/v5.md

@@ -560,6 +560,31 @@ function App() {
 }
 ```
 
+## Pass `<Link>` state as separate prop
+
+The `Link` component in v6 accepts `state` as a separate prop instead of receiving it as part of the object passed to `to` so you'll need to update your `Link` components if they are using `state`:
+
+```js
+import { Link } from "react-router-dom";
+
+// Change this:
+<Link to={{ pathname: "/home", state: state }} />
+
+// to this:
+<Link to="/home" state={state} />
+```
+
+The state value is still retrieved in the linked component using `useLocation()`:
+```js
+function Home() {
+    const location = useLocation();
+    const state = location.state;
+    return (
+        <div>Home</div>
+    );
+}
+```
+
 ## Use `useRoutes` instead of `react-router-config`
 
 All of the functionality from v5's `react-router-config` package has moved into core in v6. If you prefer/need to define your routes as JavaScript objects instead of using React elements, you're going to love this.
@@ -636,17 +661,7 @@ function App() {
 }
 ```
 
-If you need to replace the current location instead of push a new one onto the history stack, use `navigate(to, { replace: true })`. If you need state, use `navigate(to, { state })`. You can think of the first argument to `navigate` as your `<Link to>` and the other arguments as the `replace` and `state` props. The `Link` component in v6 accepts `state` as a separate prop instead of receiving it as part of the object passed to `to` so you'll need to update your `Link` components if they are using `state`:
-
-```js
-import { Link } from "react-router-dom";
-
-// Change this:
-<Link to={{ pathname: "/home", state: state }} />
-
-// to this:
-<Link to="/home" state={state} />
-```
+If you need to replace the current location instead of push a new one onto the history stack, use `navigate(to, { replace: true })`. If you need state, use `navigate(to, { state })`. You can think of the first argument to `navigate` as your `<Link to>` and the other arguments as the `replace` and `state` props.
 
 If you prefer to use a declarative API for navigation (ala v5's `Redirect` component), v6 provides a `Navigate` component. Use it like: