react-router-dom#useOutlet TypeScript Examples

The following examples show how to use react-router-dom#useOutlet. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: TechDocsReaderPage.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
TechDocsReaderPage = (props: TechDocsReaderPageProps) => {
  const { kind, name, namespace } = useParams();
  const { children, entityRef = { kind, name, namespace } } = props;

  const outlet = useOutlet();

  if (!children) {
    const childrenList = outlet ? Children.toArray(outlet.props.children) : [];

    const page = childrenList.find(child => {
      const { type } = child as Extension;
      return !type?.__backstage_data?.map?.get(TECHDOCS_ADDONS_WRAPPER_KEY);
    });

    return (
      <TechDocsReaderPageProvider entityRef={entityRef}>
        {(page as JSX.Element) || <TechDocsReaderLayout />}
      </TechDocsReaderPageProvider>
    );
  }

  return (
    <TechDocsReaderPageProvider entityRef={entityRef}>
      {({ metadata, entityMetadata, onReady }) => (
        <Page themeId="documentation">
          {children instanceof Function
            ? children({
                entityRef,
                techdocsMetadataValue: metadata.value,
                entityMetadataValue: entityMetadata.value,
                onReady,
              })
            : children}
        </Page>
      )}
    </TechDocsReaderPageProvider>
  );
}
Example #2
Source File: addons.tsx    From backstage with Apache License 2.0 6 votes vote down vote up 
useTechDocsAddons = () => {
  const node = useOutlet();
  const collection = useElementFilter(node, getAllTechDocsAddons);
  const options = useElementFilter(node, getAllTechDocsAddonsData);

  const findAddonByData = useCallback(
    (data: TechDocsAddonOptions | undefined) => {
      if (!collection || !data) return null;
      const nameKey = getDataKeyByName(data.name);
      return getTechDocsAddonByName(collection, nameKey) ?? null;
    },
    [collection],
  );

  const renderComponentByName = useCallback(
    (name: string) => {
      const data = options.find(option => option.name === name);
      return data ? findAddonByData(data) : null;
    },
    [options, findAddonByData],
  );

  const renderComponentsByLocation = useCallback(
    (location: keyof typeof TechDocsAddonLocations) => {
      const data = options.filter(option => option.location === location);
      return data.length ? data.map(findAddonByData) : null;
    },
    [options, findAddonByData],
  );

  return { renderComponentByName, renderComponentsByLocation };
}
Example #3
Source File: FlatRoutes.test.tsx    From backstage with Apache License 2.0 5 votes vote down vote up 
describe('FlatRoutes', () => {
  it('renders some routes', () => {
    const renderRoute = makeRouteRenderer(
      <FlatRoutes>
        <Route path="/a" element={<>a</>} />
        <Route path="/b" element={<>b</>} />
      </FlatRoutes>,
    );
    expect(renderRoute('/a').getByText('a')).toBeInTheDocument();
    expect(renderRoute('/b').getByText('b')).toBeInTheDocument();
    expect(renderRoute('/c').getByText('Not Found')).toBeInTheDocument();
    expect(renderRoute('/b').queryByText('Not Found')).not.toBeInTheDocument();
    expect(renderRoute('/a').getByText('a')).toBeInTheDocument();
  });

  it('is not sensitive to ordering and overlapping routes', () => {
    // The '/*' suffixes here are intentional and will be ignored by FlatRoutes
    const routes = (
      <>
        <Route path="/a-1/*" element={<>a-1</>} />
        <Route path="/a/*" element={<>a</>} />
        <Route path="/a-2/*" element={<>a-2</>} />
      </>
    );
    const renderRoute = makeRouteRenderer(<FlatRoutes>{routes}</FlatRoutes>);
    expect(renderRoute('/a').getByText('a')).toBeInTheDocument();
    expect(renderRoute('/a-1').getByText('a-1')).toBeInTheDocument();
    expect(renderRoute('/a-2').getByText('a-2')).toBeInTheDocument();
    renderRoute('').unmount();

    // This uses regular Routes from react-router, not that a-2 renders a, which is the behavior we're working around
    const renderBadRoute = makeRouteRenderer(<Routes>{routes}</Routes>);
    expect(renderBadRoute('/a').getByText('a')).toBeInTheDocument();
    expect(renderBadRoute('/a-1').getByText('a-1')).toBeInTheDocument();
    expect(renderBadRoute('/a-2').getByText('a')).toBeInTheDocument();
  });

  it('renders children straight as outlets', () => {
    const MyPage = () => {
      return <>Outlet: {useOutlet()}</>;
    };

    const routes = (
      <>
        <Route path="/a" element={<MyPage />}>
          a
        </Route>
        <Route path="/a/b" element={<MyPage />}>
          a-b
        </Route>
        <Route path="/b" element={<MyPage />}>
          b
        </Route>
        <Route path="/" element={<MyPage />}>
          c
        </Route>
      </>
    );
    const renderRoute = makeRouteRenderer(<FlatRoutes>{routes}</FlatRoutes>);
    expect(renderRoute('/a').getByText('Outlet: a')).toBeInTheDocument();
    expect(renderRoute('/a/b').getByText('Outlet: a-b')).toBeInTheDocument();
    expect(renderRoute('/b').getByText('Outlet: b')).toBeInTheDocument();
    expect(renderRoute('/').getByText('Outlet: c')).toBeInTheDocument();
  });
});