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

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

function Post() {
  const navigate = useNavigate();
  const close = () => 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 {
  Link,
  MemoryRouter,
  Outlet,
  Route,
  Routes,
  useNavigate,
} from "react-router-dom";
import "./style.css";

function Post() {
  const navigate = useNavigate();
  const close = () => 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("/")}>

Related examples

Tab with React RouterUsing React Router to create Tab links and tab panels controlled by the browser history, while maintaining keyboard navigation.

Dialog with Next.js App RouterUsing Next.js Parallel Routes to create an accessible modal Dialog that is rendered on the server and controlled by the URL, with built-in focus management.

Select with Next.js App RouterControlling the value of a Select component via the URL using the Next.js App Router and React.useOptimistic to ensure a responsive and accessible UI.

Dialog with MenuShowing a nested dropdown Menu component inside a modal Dialog using React.

Nested DialogRendering a modal Dialog to confirm an action inside another modal dialog using React.

Warning on Dialog hidePreventing users from accidentally closing a modal Dialog component with unsaved changes by displaying a nested confirmation dialog.

View all examples

Dialog with React Router

Components

Controlling the Dialog state

Stay tuned