Is it possible to use multiple outlets in a component in React-Router V6

Question

I am using React Router v6 in an application. I have a layout page, which uses an outlet to then show the main content. I would also like to include a title section that changes based on which path has been matched, but I am unsure how to do this.

function MainContent() {
  return (
    <div>
      <div>{TITLE SHOULD GO HERE}</div>
      <div><Outlet /></div>
    </div>
  );
}

function MainApp() {
  return (
    <Router>
      <Routes>
        <Route path="/projects" element={<MainContent />} >
          <Route index element={<ProjectList />} title="Projects" />
          <Route path="create" element={<CreateProject />} title="Create Project" />
        </Route>
      <Routes/>
    </Router>
  );
}

Is something like this possible? Ideally, I would like to have a few other props besides title that I can control in this way, so a good organization system for changes like this would be great.

It is possible to just have `` instance in each URL-dependent section instead of an `` — vatosarmat, Apr 17 '22 at 16:39

Drew Reese · Accepted Answer · 2022-03-15T16:46:06.683

The most straightforward way would be to move the title prop to the MainContent layout wrapper and wrap each route individually, but you'll lose the nested routing.

An alternative could be to create a React context to hold a title state and use a wrapper component to set the title.

const TitleContext = createContext({
  title: "",
  setTitle: () => {}
});

const useTitle = () => useContext(TitleContext);

const TitleProvider = ({ children }) => {
  const [title, setTitle] = useState("");
  return (
    <TitleContext.Provider value={{ title, setTitle }}>
      {children}
    </TitleContext.Provider>
  );
};

Wrap the app (or any ancestor component higher than the Routes component) with the provider.

<TitleProvider>
  <App />
</TitleProvider>

Update MainContent to access the useTitle hook to get the current title value and render it.

function MainContent() {
  const { title } = useTitle();
  return (
    <div>
      <h1>{title}</h1>
      <div>
        <Outlet />
      </div>
    </div>
  );
}

The TitleWrapper component.

const TitleWrapper = ({ children, title }) => {
  const { setTitle } = useTitle();

  useEffect(() => {
    setTitle(title);
  }, [setTitle, title]);

  return children;
};

And update the routed components to be wrapped in a TitleWrapper component, passing the title prop here.

<Route path="/projects" element={<MainContent />}>
  <Route
    index
    element={
      <TitleWrapper title="Projects">
        <ProjectList />
      </TitleWrapper>
    }
  />
  <Route
    path="create"
    element={
      <TitleWrapper title="Create Project">
        <CreateProject />
      </TitleWrapper>
    }
  />
</Route>

In this way, MainContent can be thought of as UI common to a set of routes whereas TitleWrapper (you can choose a more fitting name) can be thought of as UI specific to a route.

Update

I had forgotten about the Outlet component providing its own React Context. This becomes a little more trivial. Thanks @LIIT.

Example:

import { useOutletContext } from 'react-router-dom';

const useTitle = (title) => {
  const { setTitle } = useOutletContext();

  useEffect(() => {
    setTitle(title);
  }, [setTitle, title]);
};

...

function MainContent() {
  const [title, setTitle] = useState("");
  return (
    <div>
      <h1>{title}</h1>
      <div>
        <Outlet context={{ title, setTitle }} />
      </div>
    </div>
  );
}

...

const CreateProject = ({ title }) => {
  useTitle(title);

  return ...;
};

...

<Router>
  <Routes>
    <Route path="/projects" element={<MainContent />}>
      <Route index element={<ProjectList title="Projects" />} />
      <Route
        path="create"
        element={<CreateProject title="Create Project" />}
      />
    </Route>
  </Routes>
</Router>

Thanks, this is actually the solution I have been using to set the title. I asked this question because I now want to add a second parameter (I have an 'action' section with a few buttons...I want the style/placement of the buttons to be the same, but which buttons should be a route prop). I suppose I could double wrap it in a TitleProvider and ActionProvider, but this seems like its getting messy quick if this keeps expanding — DMAR, Jan 10 '22 at 16:27
@DMAR That's sort of why I included the last blurb about how to think about those two components a bit more abstractly. Certainly for separation of concerns using separate React contexts is optimal, but I get the concern about the wrapping. To make the code more **DRY** you could declare a single `PageWrapper` component that accesses all the custom context hooks and takes all the props and for them, the result would would look much like the above for the routing. Does this make sense or would you like me to update with a more general example solution? — Drew Reese, Jan 10 '22 at 16:32
v6 offers its own hook, called `useOutletContext`, to share state or content between parents & children : https://reactrouter.com/docs/en/v6/api#useoutletcontext — LIIT, Mar 15 '22 at 12:46
+ 1 I built an entire layout system using the context with about 5 sets of setters... titlebarLeftArea, titlebarRightArea, color, etc. It's very powerful if you do it right. It actually means the *contained* component controls aspects of it's parent layout. Good stuff. — Artemis Prime, Dec 13 '22 at 12:13

score 1 · Answer 2 · answered Apr 01 '22 at 20:20

I was facing the same issue for a left-right layout: changing sidebar content and main content, without repeating styling, banner, etc.

The simplest approach I found was to remove nested routing, and create a layout component in which I feed the changing content through properties.

Layout component (stripped for this post):

export function Layout(props) {

  return (
    <>
      <div class="left-sidebar">
        <img id="logo" src={Logo} alt="My logo" />
        {props.left}
      </div>

      <div className='right'>
        <header className="App-header">
          <h1>This is big text!</h1>
        </header>

        <nav>
          <NavLink to="/a">A</NavLink>
          &nbsp;|&nbsp;
          <NavLink to="/b">B</NavLink>
        </nav>

        <main>
          {props.right}
        </main>
      </div>
    </>
  );
}

Usage in react router:

<Route path="myPath" element={
  <Layout left={<p>I'm left</p>}
          right={<p>I'm right</p>} />
} />

It breaks the abstraction of nested routing, so beware if any of the left or right content areas are now rendering descendent routes that this parent route needs to specify a trailing wildcard `"*"` matcher to its path. Otherwise, this likely also works in certain use cases. — Drew Reese, Dec 13 '22 at 18:50

Wingnod · Answer 3 · 2023-02-18T10:21:41.643

Another solution is to use the handle prop on the route as described in the useMatches documentation.

import { useMatches } from "react-router-dom";

function MainContent() {
  const matches = useMatches()

  const [title] = matches
    .filter((match) => Boolean(match.handle?.title))
    .map((match) => match.handle.title);

  return (
    <div>
      <div>{title}</div>
      <div><Outlet /></div>
    </div>
  );
}

function MainApp() {
  return (
    <Router>
      <Routes>
        <Route path="/projects" element={<MainContent />} >
          <Route index element={<ProjectList />} handle={{ title: "Projects" }} />
          <Route path="create" element={<CreateProject />} handle={{ title: "Create Project" }} />
        </Route>
      <Routes/>
    </Router>
  );
}

Is it possible to use multiple outlets in a component in React-Router V6

3 Answers3

Update

Linked