Dialog with React Router

Using React Router⁠ to create a modal Dialog that's controlled by the browser history.

Dialog Button Focusable VisuallyHidden Routing React Router

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
import * as Ariakit from "@ariakit/react";
import type { SyntheticEvent } from "react";
import {
  Link,
  MemoryRouter,
  Outlet,
  Route,
  Routes,
  useNavigate,
} from "react-router";
import "./style.css";

function Post() {
  const navigate = useNavigate();

  const close = (event?: Event | SyntheticEvent) => {
    event?.preventDefault();
    navigate("/");
  };

  return (
    <Ariakit.Dialog
      open
      onClose={close}
      backdrop={<div className="backdrop" />}
      className="dialog"
    >
      <Ariakit.DialogDismiss
        className="button secondary dismiss"
        render={<Link to="/" />}
      />
      <Ariakit.DialogHeading hidden>Post</Ariakit.DialogHeading>
      <form className="form" onSubmit={close}>
        <label>
          <Ariakit.VisuallyHidden>Post</Ariakit.VisuallyHidden>
          <Ariakit.Focusable
            autoFocus
            className="input"
            render={<textarea placeholder="What's happening?" rows={5} />}
          />
        </label>
        <Ariakit.Button type="submit" className="button primary">
          Post
        </Ariakit.Button>
      </form>
    </Ariakit.Dialog>
  );
}

function Home() {
  return (
    <>
      <Link to="/post" className="button">
        Post
      </Link>
      <Outlet />
    </>
  );
}

export default function Example() {
  return (
    // We're using MemoryRouter for demonstration purposes. But you can use
    // BrowserRouter, HashRouter, etc. depending on your needs.
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="/post" element={<Post />} />
        </Route>
      </Routes>
    </MemoryRouter>
  );
}

import * as Ariakit from "@ariakit/react";
import type { SyntheticEvent } from "react";
import {
  Link,
  MemoryRouter,
  Outlet,
  Route,
  Routes,
  useNavigate,
} from "react-router";
import "./style.css";

function Post() {
  const navigate = useNavigate();

  const close = (event?: Event | SyntheticEvent) => {
    event?.preventDefault();
    navigate("/");
  };

  return (
    <Ariakit.Dialog
      open
      onClose={close}
      backdrop={<div className="backdrop" />}
      className="dialog"
    >
      <Ariakit.DialogDismiss
        className="button secondary dismiss"
        render={<Link to="/" />}
      />
      <Ariakit.DialogHeading hidden>Post</Ariakit.DialogHeading>
      <form className="form" onSubmit={close}>
        <label>
          <Ariakit.VisuallyHidden>Post</Ariakit.VisuallyHidden>
          <Ariakit.Focusable
            autoFocus
            className="input"
            render={<textarea placeholder="What's happening?" rows={5} />}
          />
        </label>
        <Ariakit.Button type="submit" className="button primary">
          Post
        </Ariakit.Button>
      </form>
    </Ariakit.Dialog>
  );
}

function Home() {
  return (
    <>
      <Link to="/post" className="button">
        Post
      </Link>
      <Outlet />
    </>
  );
}

export default function Example() {
  return (
    // We're using MemoryRouter for demonstration purposes. But you can use
    // BrowserRouter, HashRouter, etc. depending on your needs.
    <MemoryRouter>
      <Routes>
        <Route path="/" element={<Home />}>
          <Route path="/post" element={<Post />} />
        </Route>
      </Routes>
    </MemoryRouter>
  );
}

Components

DialogOpen a new window that can be either modal or non-modal and optionally rendered in a React portal. This component is based on the WAI-ARIA Dialog Pattern.

ButtonTrigger an action or event, such as submitting a Form, opening a Dialog, canceling an action, or performing a delete operation in React. This component is based on the WAI-ARIA Button Pattern.

FocusablePress Tab or click to shift focus to any React element. This abstract component standardizes focus behavior across different browsers.

VisuallyHiddenHide an element visually but keep it available for screen readers and other assistive technologies.

View all components

To control the open state, you can pass the open and onClose props to the Dialog component. These props allow you to synchronize the dialog state with other state sources, such as the browser history.

In this example, since the dialog is only rendered when the route matches, we can pass open={true} to the Dialog so that the dialog is always open. Then, we can use onClose to navigate back when the dialog is closed:

const navigate = useNavigate();

<Dialog open onClose={() => navigate("/")}>
const navigate = useNavigate();

<Dialog open onClose={() => navigate("/")}>