Merge branch 'main' into release-next

.github/workflows/support.yml

@@ -16,7 +16,10 @@ jobs:
           issue-comment: >
             :wave: @{issue-author}, we use the issue tracker exclusively for bug reports
             and feature requests. However, this issue appears to be a support request.
+
             For usage questions, please use [Stack Overflow](https://stackoverflow.com/questions/tagged/react-router)
-            or [Reactiflux](https://discord.gg/6RyV8n8yyM) where there are a lot more people ready to help you out.
+            or [Discord](https://rmx.as/discord) where there are a lot more people ready to help you out, or 
+            [post a new question](https://github.com/remix-run/react-router/discussions/new?category=q-a) in the 
+            Discussions tab of this repository.
 
             Please feel free to clarify your issue if you think it was closed prematurely.

README.md

@@ -7,11 +7,11 @@
 
 React Router is a lightweight, fully-featured routing library for the [React](https://reactjs.org) JavaScript library. React Router runs everywhere that React runs; on the web, on the server (using node.js), and on React Native.
 
-If you're new to React Router, we recommend you start with [the tutorial](/docs/start/tutorial.md).
+If you're new to React Router, we recommend you start with [the tutorial](https://reactrouter.com/en/main/start/tutorial).
 
 If you're migrating to v6 from v5 (or v4, which is the same as v5), check out [the migration guide](/docs/upgrading/v5.md). If you're migrating from Reach Router, check out [the migration guide for Reach Router](/docs/upgrading/reach.md). If you need to find the code for v5, [it is on the `v5` branch](https://github.com/remix-run/react-router/tree/v5).
 
-When v6 is stable we will publish the docs on our website.
+Documentation for v6 can be found [on our website](https://reactrouter.com/).
 
 ## Contributing
 

contributors.yml

@@ -16,6 +16,7 @@
 - awreese
 - aymanemadidi
 - bavardage
+- bbrowning918
 - BDomzalski
 - bhbs
 - bobziroll
@@ -26,6 +27,7 @@
 - btav
 - bvangraafeiland
 - CanRau
+- cassidoo
 - chaance
 - chasinhues
 - chensokheng
@@ -52,6 +54,7 @@
 - engpetermwangi
 - FilipJirsak
 - frontsideair
+- fyzhu
 - fz6m
 - gianlucca
 - gijo-varghese
@@ -77,6 +80,7 @@
 - JakubDrozd
 - janpaepke
 - jasonpaulos
+- jdufresne
 - jenseng
 - JesusTheHun
 - jimniels
@@ -100,10 +104,12 @@
 - lkwr
 - lopezac
 - lordofthecactus
+- LordThi
 - loun4
 - lqze
 - lukerSpringTree
 - m-shojaei
+- machour
 - Manc
 - manzano78
 - marc2332

decisions/template.md

@@ -0,0 +1,11 @@
+# Title
+
+Date: YYYY-MM-DD
+
+Status: proposed | rejected | accepted | deprecated | … | superseded by [0005](0005-example.md)
+
+## Context
+
+## Decision
+
+## Consequences

docs/components/form.md

@@ -132,12 +132,12 @@ The method will be available on [`request.method`][requestmethod] inside the rou
   }}
   action={async ({ request, params }) => {
     switch (request.method) {
-      case "put": {
+      case "PUT": {
         let formData = await request.formData();
         let name = formData.get("projectName");
         return fakeUpdateProject(name);
       }
-      case "delete": {
+      case "DELETE": {
         return fakeDeleteProject(params.id);
       }
       default: {

docs/components/link.md

@@ -21,6 +21,8 @@ interface LinkProps
   state?: any;
   to: To;
   reloadDocument?: boolean;
+  preventScrollReset?: boolean;
+  relative?: "route" | "path";
 }
 
 type To = string | Partial<Path>;
@@ -116,5 +118,26 @@ An example when you might want this behavior is a list of tabs that manipulate t
 
 ```
 
+## `replace`
+
+The `replace` property can be used if you'd like to replace the current entry in the history stack via [`history.replaceState`][history-replace-state] instead of the default usage of [`history.pushState`][history-push-state].
+
+## `state`
+
+The `state` property can be used to set a stateful value for the new location which is stored inside [history state][history-state]. This value can subsequently be accessed via `useLocation()`.
+
+```tsx
+<Link to="new-path" state={{ some: "value" }} />
+```
+
+You can access this state value while on the "new-path" route:
+
+```ts
+let { state } = useLocation();
+```
+
 [link-native]: ./link-native
 [scrollrestoration]: ./scroll-restoration
+[history-replace-state]: https://developer.mozilla.org/en-US/docs/Web/API/History/replaceState
+[history-push-state]: https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
+[history-state]: https://developer.mozilla.org/en-US/docs/Web/API/History/state

docs/route/route.md

@@ -136,6 +136,39 @@ function Product() {
 }
 ```
 
+### Optional Segments
+
+You can make a route segment optional by adding a `?` to the end of the segment.
+
+```tsx
+<Route
+  // this path will match URLs like
+  // - /categories
+  // - /en/categories
+  // - /fr/categories
+  path="/:lang?/categories"
+  // the matching param might be available to the loader
+  loader={({ params }) => {
+    console.log(params["*"]); // "one/two"
+  }}
+  // and the action
+  action={({ params }) => {}}
+  element={<Categories />}
+/>;
+
+// and the element through `useParams`
+function Categories() {
+  let params = useParams();
+  console.log(params.lang);
+}
+```
+
+You can have optional static segments, too:
+
+```jsx
+<Route path="/project/task?/:taskId" />
+```
+
 ### Splats
 
 Also known as "catchall" and "star" segments. If a route path pattern ends with `/*` then it will match any characters following the `/`, including other `/` characters.

docs/router-components/browser-router.md

@@ -27,14 +27,15 @@ A `<BrowserRouter>` stores the current location in the browser's address bar usi
 
 ```tsx
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { BrowserRouter } from "react-router-dom";
 
-ReactDOM.render(
+const root = createRoot(document.getElementById("root"));
+
+root.render(
   <BrowserRouter>
     {/* The rest of your app goes here */}
-  </BrowserRouter>,
-  root
+  </BrowserRouter>
 );
 ```
 

docs/start/tutorial.md

@@ -139,10 +139,10 @@ export default function Root() {
         <nav>
           <ul>
             <li>
-              <a href={`contacts/1`}>Your Name</a>
+              <a href={`/contacts/1`}>Your Name</a>
             </li>
             <li>
-              <a href={`contacts/2`}>Your Friend</a>
+              <a href={`/contacts/2`}>Your Friend</a>
             </li>
           </ul>
         </nav>

docs/upgrading/v5.md

@@ -560,6 +560,30 @@ 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 +660,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:
 

packages/react-router-dom/README.md

@@ -2,4 +2,4 @@
 
 The `react-router-dom` package contains bindings for using [React
 Router](https://github.com/remix-run/react-router) in web applications.
-Please see [the Getting Started guide](https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md) for more information on how to get started with React Router.
+Please see [the Getting Started guide](https://reactrouter.com/en/main/start/tutorial) for more information on how to get started with React Router.

packages/react-router-native/README.md

@@ -3,4 +3,4 @@
 The `react-router-native` package contains bindings for using [React
 Router](https://github.com/remix-run/react-router) in [React
 Native](https://facebook.github.io/react-native/) applications.
-Please see [the Getting Started guide](https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md) for more information on how to get started with React Router.
+Please see [the Getting Started guide](https://reactrouter.com/en/main/start/tutorial) for more information on how to get started with React Router.

tutorial/README.md

@@ -1,3 +1,3 @@
 # React Router v6 Tutorial
 
-To complete this tutorial, we recommend following along with our guide in our [Getting Started documentation](https://github.com/remix-run/react-router/blob/main/docs/start/tutorial.md).
+To complete this tutorial, we recommend following along with our guide in our [Getting Started documentation](https://reactrouter.com/en/main/start/tutorial).