@reach/router#Router TypeScript Examples

Customers = () => {
  return (
    <Router>
      <CustomerIndex path="/" />
      <CustomerGroups path="/groups/*" />
      <Details path=":id" />
    </Router>
  )
}

ReactDOM.render(
    <AppStateProvider>
        <Provider theme={defaultTheme}>
            <Router>
                <InstalledAppPage default />
                <EditPage path={"/edit/:namespace/:name"} />
            </Router>
        </Provider>
    </AppStateProvider>,
    document.querySelector("#js-app")
);

ReactDOM.render(
    <AppStateProvider>
        <Provider theme={defaultTheme}>
            <Router>
                <EditPage default name={name} namespace={namespace} />
            </Router>
        </Provider>
    </AppStateProvider>,
    document.querySelector("#js-app")
);

Routes: React.FC = () => {
  // Render
  return (
    <Router>
      <RequireLogin path="/">
        <Home path="/" />
        <ViewBooking path="/booking/:id" />
        <UpcomingBookings path="/bookings" />

        <Bookings path="/admin" />
        <BookingStats path="/admin/stats" />
        <CreateBooking path="/admin/booking" />
        <Users path="/admin/users" />
        <User path="/admin/users/:email" />
        <UserBookings path="/admin/users/bookings/:email" />

        <Privacy path="/privacy" />
        <PageNotFound default={true} />
      </RequireLogin>

      <Help path="/help" />
    </Router>
  );
}

Products = () => {
  return (
    <Router>
      <ProductIndex path="/" />
      <EditProductPage path=":id" />
      <NewProductPage path="new" />
    </Router>
  )
}

Pricing = () => {
  return (
    <Router>
      <PricingIndex path="/" />
      <PricingDetails path="/:id" />
      <New path="/new" />
    </Router>
  )
}

GiftCard = () => {
  return (
    <Router>
      <Overview path="/" />
      <GiftCardDetails path="/:id" />
      <ManageGiftCard path="manage" />
    </Router>
  )
}

Discounts = () => {
  return (
    <Router>
      <DiscountIndex path="/" />
      <Details path=":id" />
      <New path="new" />
    </Router>
  )
}

Me: React.FC = () => {
  const { locale } = useIntl();
  return (
    <Layout>
      <Router basepath={`/${locale}/me`}>
        <SigninView path="/sign-in" />
        <InviteView path="/invite/:uid" />
        <PrivateRoute path="/" component={ProfileView} />
        <PrivateRoute path="/contacts" component={ContactsView} />
        <PrivateRoute path="/log" component={LogView} />
        <PrivateRoute path="/share" component={ShareView} />
        <PrivateRoute path="/settings" component={SettingsView} />
      </Router>
    </Layout>
  );
}

/*
 * Customer groups routes
 */
function CustomerGroups(_: RouteComponentProps) {
  return (
    <CustomerGroupContextContainer>
      <Router basepath="/a/customers/groups">
        <Index path="/" />
        <Details path=":id" />
      </Router>
    </CustomerGroupContextContainer>
  )
}

Routes: React.FC = () => (
  <Router>
    <NotFound default />
    <Home path="/" />
    <PipelineNew path="new" />
    <PipelineView path="view/:pipelineId" />
    <PipelineEdit path="edit/:pipelineId" />
    <Components path="components" />
    <Help path="help" />
  </Router>
)

Account = ({
  pageContext
}: {
  pageContext: {}
}) => {
  return (
    <div id='account__container' className='container--1000 mxa outer p2 site'>
      <Router>
        <PublicRoute path='/account'>
          <AuthWrapper path='/' component={Portal} />
          <Reset path='/reset/:id/:token' />
          <Login path='/login' />
          <Activate
            // @ts-ignore
            path='/activate/:id/:token'
          />
          <InvalidToken path='/invalid_token' />
          <Register path='/register' />
          <ForgotPassword path='/forgot' />
        </PublicRoute>
      </Router>
    </div>
  )
}

Previews = () => {
  return (
    <div>
      <Router>
        <PreviewPage path="/previews/:document" />
      </Router>
    </div>
  )
}

Docs = () => {
  return (
    <div>
      <Router>
        <PreviewPage path="/docs/:document" />
      </Router>
    </div>
  )
}

run = async () => {
  ui.setCSSVars(ui.sizes);

  const routes: Route[] = [Route.new('service-map', { path: '(/:namespace)' })];

  const Screen = observer(() => {
    useHooksOnDataManager();

    return (
      <Router>
        <App key="service-map" api={api} path="/*appPath" />
      </Router>
    );
  });

  // NOTE: we don't have another option to take notifier from except from inside
  const onFeatureFetchError = (err: Error, notifier: Notifier) => {
    console.error('features fetch error: ', err);
    notifier.showError(`Failed to load UI settings: ${err.message}`);
  };

  const elems = (
    <NotifierProvider>
      <StoreProvider historySource={RouteHistorySourceKind.URL} routes={routes}>
        <DataManagerProvider api={api}>
          <FeatureFlagsFetcher api={api.v1} onError={onFeatureFetchError}>
            <Screen />
          </FeatureFlagsFetcher>
        </DataManagerProvider>
      </StoreProvider>
    </NotifierProvider>
  );

  ReactDOM.render(elems, document.getElementById('app'));
}

Collections = () => {
  return (
    <Router className="h-full">
      <CollectionDetails path=":id" />
    </Router>
  )
}

App = () => {
  (window as any).ITWIN_VIEWER_HOME = window.location.origin;

  const desktopInitializerProps = useMemo<DesktopViewerProps>(
    () => ({
      additionalI18nNamespaces: ["iTwinDesktopViewer"],
      enablePerformanceMonitors: true,
    }),
    []
  );

  const initialized = useDesktopViewerInitializer(desktopInitializerProps);
  const connectivityStatus = useConnectivity();

  const [settings, setSettings] = useState<ViewerSettings>();

  useEffect(() => {
    if (initialized) {
      // setup connectivity events to let the backend know the status
      void ITwinViewerApp.ipcCall.setConnectivity(connectivityStatus);
      void getUserSettings().then((userSettings) => {
        setSettings(userSettings);
      });
    }
  }, [initialized, connectivityStatus]);

  const addRecent = useCallback(
    async (
      path: string,
      iModelName?: string,
      iTwinId?: string,
      iModelId?: string
    ) => {
      const updatedSettings = await addRecentClient(
        path,
        iModelName,
        iTwinId,
        iModelId
      );
      setSettings(updatedSettings);
      return updatedSettings;
    },
    []
  );

  return initialized && settings ? (
    <SettingsContext.Provider value={{ settings, addRecent }}>
      <div style={{ height: "100%" }}>
        <Router style={{ height: "100%" }}>
          <HomeRoute path="/" />
          <IModelsRoute path="/itwins/:iTwinId" />
          <ITwinsRoute path="/itwins" />
          <ViewerRoute path="/viewer" />
        </Router>
      </div>
    </SettingsContext.Provider>
  ) : (
    <></>
  );
}

DraftOrders = () => {
  return (
    <Router>
      <DraftOrderIndex path="/" />
      <DraftOrderDetails path=":id" />
    </Router>
  )
}

Orders = () => {
  return (
    <Router>
      <OrderIndex path="/" />
      <Details path=":id" />
    </Router>
  )
}

ReactDOM.render(
  <Router>
    <Home path="/" />
    <API path="/api" />
  </Router>,
  document.getElementById("root")
);

App: React.FC = ({ children }) => {
  const classes = useStyles();

  const [projectMeta, setProjectMeta] = useState<ProjectMeta[]>([]);
  const [categories, setCategories] = useState<ModuleCategories>({});
  const [risks, setRisks] = useState<Risk[]>([]);
  const [tools, setTools] = useState<Tools>({});
  const [meta, setMeta] = useState<Meta>({});
  const [quickChecklist, setQuickChecklist] = useState<Checklists>({});

  const handleSelectChecklistItem = (checklistName: string, checklistItemIndex: number, checked: boolean) => {
    const clonedChecklist = cloneDeep(quickChecklist);
    clonedChecklist[checklistName][checklistItemIndex].checked = checked;
    setQuickChecklist(clonedChecklist);
  };

  const initQuickChecklist = (checklists: Checklists) => {
    setQuickChecklist(checklists);
  };

  const handleSelectTool = (tool: string, category: string, value: boolean) => {
    const clonedTools = cloneDeep(tools);
    clonedTools[category][tool].response = value;
    setTools(clonedTools);
  };

  const handleSelectModule = (
    categoryKey: string,
    moduleKey: string,
    value: boolean,
  ) => {
    const clonedCategories = cloneDeep(categories);
    clonedCategories[categoryKey][moduleKey].response = value;
    setCategories(clonedCategories);
  };

  const handleUpdateProjectMeta = (name: string, response: string) => {
    const clonedProjectMeta = cloneDeep(projectMeta);
    const meta = clonedProjectMeta.find(m => m.name === name);
    if (meta) {
      meta.userResponse = response;
      setProjectMeta(clonedProjectMeta);
    }
  };

  const prepareResult = (): AssessmentResult => {
    return {
      selectedRisks: getSelectedRisks(risks),
      selectedModulesByCategory: pickCategoriesWithResponse(categories),
      projectMetaResponses: prepareProjectMeta(projectMeta, risks),
      selectedTools: getSelectedTools(tools),
    };
  };

  const contextValue = {
    projectMeta,
    categories,
    risks,
    tools,
    quickChecklist,
    initQuickChecklist,
    handleSelectChecklistItem,
    handleUpdateProjectMeta,
    handleSelectModule,
    handleRiskAnswer: handleRiskAnswer(risks, setRisks),
    handleSelectTool,
    prepareResult,
  };

  useEffect(() => {
    const fetchData = async () => {
      try {
        const dataRes = await fetch(`${API_URL}/data.json`);
        const { data }: DirectoryData = await dataRes.json();
        setProjectMeta(data.projectMeta);
        setCategories(data.modules);
        setRisks(data.risks.questions);
        setTools(data.tooling);

        const metaRes = await fetch(`${API_URL}/meta`);
        const meta: Meta = await metaRes.json();
        setMeta(meta);
      } catch (err) {
        console.log(`Error fetching data dictionary or meta data: ${err}`);
      }
    };

    fetchData();
  }, []);

  return (
    <AppContext.Provider value={contextValue}>
      <StepProvider>
        <div className="App">
          <Header />
          <main className={classes.layout}>
            <Paper className={classes.paper}>
              <Router>
                <Home path="/" listoMeta={meta} />
                <Faq path="/faq" listoMeta={meta} />
                <Assessment path="/assessment" />
                <Project path="project/:projectId" listoMeta={meta} />
                <QuickChecklist path="checklist/:categoryName/:moduleName"/>
                <QuickChecklist path="checklist/:categoryName/:moduleName/:id"/>
                <SearchChecklists path="/checklists"/>
              </Router>
            </Paper>
          </main>
        </div>
      </StepProvider>
    </AppContext.Provider>
  );
}