react-router-dom#HashRouter TypeScript Examples

Root = () => {
  return (
    <GlobalErrorBoundary>
      <Web3ReactProvider getLibrary={getLibrary}>
        <MultichainProvider>
          <ThemeProvider>
            <HashRouter>
              <SplitApp />
            </HashRouter>
          </ThemeProvider>
        </MultichainProvider>
      </Web3ReactProvider>
    </GlobalErrorBoundary>
  );
}

root.render(
  <HashRouter>
    <Routes>
      <Route path="/" element={<App />}>
        <Route index element={<Homepage />} />
        <Route path="add-contract" element={<AddContract />} />
        <Route path="hash-lookup" element={<SelectCodeHash />} />
        <Route path="/instantiate" element={<Instantiate />}>
          <Route path=":codeHash" />
        </Route>
        <Route path="/contract/:address/" element={<Contract />} />
        <Route path="/settings" element={<Settings />} />
        <Route path="*" element={<NotFound />} />
      </Route>
    </Routes>
  </HashRouter>
);

ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Blocklist>
          <Provider store={store}>
            <Updaters />
            <ThemeProvider>
              <ThemedGlobalStyle />
              <HashRouter>
                <App />
              </HashRouter>
            </ThemeProvider>
          </Provider>
        </Blocklist>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)

Phone: React.FC = (props: any) => {
    const loading = () => <div className="animated fadeIn pt-1 text-center">Chargement...</div>

    return (
        <div className="phone-container">
            <PhoneCoque />
            <div className="test-bg" />

            <Suspense fallback={loading()}>
                <HashRouter basename='/phone'>
                    <div className="phone-content" style={{ backgroundImage: `url(${background})` }}>
                        <HeaderBar />
                        <BannerNotifications />
                        <Switch>
                            {routes.map((route, idx) => {
                                return route.component ? (
                                    <Route
                                        key={idx}
                                        path={route.path}
                                        exact={route.exact}
                                        render={(props: any) => (
                                            <route.component {...props} />
                                        )} />
                                ) : (null);
                            })}
                        </Switch>
                    </div>
                    <Route component={BottomPhoneNavigator} />
                </HashRouter>
            </Suspense>
        </div>
    )
}

ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <HashRouter>
              <App />
            </HashRouter>
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)

function Root() {
    const isApp = (): boolean => {
        return true; //window.location.host.includes("app");
    };

    const [loading, setLoading] = useState(true);

    useEffect(() => {
        loadTokenPrices().then(() => setLoading(false));
    }, []);

    if (loading) return <Loading />;

    const app = () => (
        <HashRouter>
            <App />
        </HashRouter>
    );

    return isApp() ? app() : <Landing />;
}

App = () => {
  const setKeybindings = useStore((state) => state.setKeybindings);
  const setLanguage = useStore((state) => state.setLanguage);

  useEffect(() => {
    const keybindingSettings = localStorage.getItem("lainKeybindings");
    const language = localStorage.getItem("lainLanguage");
    if (keybindingSettings) setKeybindings(JSON.parse(keybindingSettings));
    if (language) setLanguage(JSON.parse(language));
  }, [setKeybindings, setLanguage]);

  return (
    <HashRouter>
      <Switch>
        <Route path={"/"} exact component={MainPage} />
        <Route path={"/notes"} exact component={Notes} />
        <Route path={"/game"} exact component={Game} />
        <Route path={"/guide"} exact component={Guide} />
        <Route path={"/options"} exact component={Options} />
      </Switch>
    </HashRouter>
  );
}

function App() {
  return (
    <StoreProvider>
      <HashRouter
        getUserConfirmation={async (message, callback) => {
          const userConfirm = await new Promise<boolean>((resolve) => {
            Modal.confirm({
              title: message,
              onOk: () => resolve(true),
              onCancel: () => resolve(false),
            });
          });

          callback(userConfirm);
        }}
      >
        <div className="my-app">
          <Pages />
        </div>
      </HashRouter>
    </StoreProvider>
  );
}

App: React.FC = () => {
  return (
    <StrictMode>
      <HashRouter>
        <Suspense fallback={'加载中...'}>{renderRoutes(routeList)}</Suspense>
      </HashRouter>
    </StrictMode>
  )
}

export function Header() {
  const { user } = useStore(({ app }) => app);

  return (
    <nav className='navbar navbar-light'>
      <div className='container'>
        <a className='navbar-brand' href='/#/'>
          conduit
        </a>
        <ul className='nav navbar-nav pull-xs-right'>
          <HashRouter>
            <NavItem text='Home' href='/' />

            {user.match({
              none: () => <GuestLinks />,
              some: (user) => <UserLinks user={user} />,
            })}
          </HashRouter>
        </ul>
      </div>
    </nav>
  );
}

public render(): React.ReactElement<ISpfxReactRouterProps> {
    return (
      <div className={styles.spfxReactRouter}>
        <Stack horizontal tokens={stackTokens}>
          <Nav styles={navStyles} ariaLabel="Nav example similiar to one found in this demo page" groups={navLinkGroups} />
          <HashRouter>
            <Route path="/" exact component={SpfxCustomers}></Route>
            <Route path="/Customer/:id" component={SpfxCustomerDetails}></Route>
            <Route path="/CustomerFiles/" component={SpfxCustomersFiles}></Route>
          </HashRouter>
        </Stack>
      </div>
    );
  }

BroadcastRoot: React.FC = () => (
  <I18nProvider>
    <UnsupportedCheck>
      <HashRouter>
        <FeatureProvider>
          <LiveEventProvider>
            <LiveEventParticipantProvider>
              <CredentialsProvider>
                <ChimeProvider>
                  <App>
                    <Authenticated>
                      <VerifiedParticipantProvider>
                        <TalentMeeting />
                      </VerifiedParticipantProvider>
                    </Authenticated>
                  </App>
                </ChimeProvider>
              </CredentialsProvider>
            </LiveEventParticipantProvider>
          </LiveEventProvider>
        </FeatureProvider>
      </HashRouter>
    </UnsupportedCheck>
  </I18nProvider>
)

Root = () => (
  <HashRouter>
    <I18nProvider>
      <ChimeProvider>
        <UIStateProvider>
          <Routes />
        </UIStateProvider>
      </ChimeProvider>
    </I18nProvider>
  </HashRouter>
)

export function App() {
    return (
        <HashRouter>
            <Switch>
                <Route path="/:questionnaireId" exact>
                    <Main />
                </Route>
                <Redirect
                    to={{
                        pathname: 'demo-1',
                        state: { referrer: history.location.pathname },
                    }}
                />
            </Switch>
        </HashRouter>
    );
}

ReactDOM.render(
  <ThemeProvider theme={signerTheme}>
    <HashRouter>
      <App
        errors={errorsContainer}
        accountManager={accountManager}
        homeContainer={homeContainer}
        signingContainer={signingContainer}
        connectSignerContainer={connectSignerContainer}
        popupContainer={popupContainer}
      />
    </HashRouter>
  </ThemeProvider>,
  document.getElementById('root')
);

ReactDOM.render(
  <React.StrictMode>
    <HashRouter>
      <ApolloProvider client={client}>
        <Main />
      </ApolloProvider>
    </HashRouter>
  </React.StrictMode>,
  document.getElementById("root")
)

store.ready().then(() => {
  ReactDOM.render(
    <Provider store={store}>
      <ThemeProvider>
        <HelmetProvider>
          <HashRouter>
            <React.StrictMode>
              <App />
            </React.StrictMode>
          </HashRouter>
        </HelmetProvider>
      </ThemeProvider>
    </Provider>,
    MOUNT_NODE,
  )
})

ReactDOM.render(
  <React.StrictMode>
    <UseI18nProvider>
      <HashRouter basename="/">
        <ThemeProvider theme={theme}>
          <UseTimeProvider>
            <UseDataProvider>
              <UseTravelRecordProvider>
                <UseBookmarkLocationProvider>
                  <UseCameraProvider>
                    <App />
                  </UseCameraProvider>
                </UseBookmarkLocationProvider>
              </UseTravelRecordProvider>
            </UseDataProvider>
          </UseTimeProvider>
        </ThemeProvider>
      </HashRouter>
    </UseI18nProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

ReactDOM.render(
  // <React.StrictMode>
  <div>
    <HashRouter>
      <App />
    </HashRouter>
  </div>,
  // </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <HashRouter>
              <App />
            </HashRouter>
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)

App = () => {
  useAppStateHandle();
  useAppUpdateHandle();
  useFileDownloadHandle();
  const platform = usePlatform();

  return (
    <HashRouter>
      {platform === 'win32' && <WindowButton />}
      <SideBar className={platform === 'win32' ? 'app-win32-wrapper' : ''} routes={routes} />
      <div className="page-container">
        {routes.map(
          route =>
            route.path && (
              <Route key={route.path} path={route.path} exact>
                {({ match }) => (
                  <CSSTransition in={match !== null} exit={false} timeout={300} classNames="page" unmountOnExit>
                    <div className="page">
                      <div
                        className={
                          platform === 'win32'
                            ? 'app-main-content-wrapper app-win32-wrapper'
                            : 'app-main-content-wrapper'
                        }
                      >
                        {route.component && <route.component />}
                      </div>
                    </div>
                  </CSSTransition>
                )}
              </Route>
            )
        )}
      </div>
    </HashRouter>
  );
}

ReactRouter: React.FC<BrowserRouterProps | HashRouterProps> = (args) => {
  return process.env.REACT_APP_HASH_ROUTER ? (
    <HashRouter {...(args as HashRouterProps)}>{args.children}</HashRouter>
  ) : (
    <BrowserRouter {...(args as BrowserRouterProps)}>
      {args.children}
    </BrowserRouter>
  )
}

BaseProviders: FC = ({ children }) => {
  useEffectOnce(() => {
    // Redirect for legacy links (without hash)
    if (window.location.pathname !== '/' && !window.location.pathname.startsWith('/ipfs/')) {
      window.location.hash = window.location.pathname
      window.location.pathname = ''
    }
  })

  return (
    <BaseCtxProvider>
      <HashRouter>
        <Providers>
          <Updaters />
          {children}
        </Providers>
      </HashRouter>
    </BaseCtxProvider>
  )
}

ReactDOM.render(
  <StrictMode>
    <FixedGlobalStyle />
    <Web3ReactProvider getLibrary={getLibrary}>
      <Web3ProviderNetwork getLibrary={getLibrary}>
        <Provider store={store}>
          <Updaters />
          <ThemeProvider>
            <ThemedGlobalStyle />
            <HashRouter>
              <App />
            </HashRouter>
          </ThemeProvider>
        </Provider>
      </Web3ProviderNetwork>
    </Web3ReactProvider>
  </StrictMode>,
  document.getElementById('root')
)

router = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/" component={BasicLayout} />
      </Switch>
    </HashRouter>
  );
}

app = (
  <MuiThemeProvider theme={theme}>
    <GkeMetadataProvider>
      <HashRouter>
        <Router />
      </HashRouter>
    </GkeMetadataProvider>
  </MuiThemeProvider>
)

browser.tabs.query({ active: true, currentWindow: true }).then(() => {
  browser.runtime.connect();
  ReactDOM.render(
    <Provider store={store}>
      <HashRouter>
        <Popup />
      </HashRouter>
    </Provider>,
    document.getElementById("popup"),
  );
});

UnstatedContainer: React.FC<{}> = ({ children }) => (<HashRouter>
  <AddressContainer.Provider>
    <ContactContainer.Provider>
      <AnalyticsContainer.Provider>
        <FeatureFlagsContainer.Provider>
          <VoterContainer.Provider>
            <ModalProvider>
              <FetchingDataContainer.Provider>
                {children}
                <LoadingOverlay/>
                <CustomToastContainer
                  position="top-right"
                  autoClose={3000}
                  hideProgressBar={true}
                  newestOnTop={true}
                  closeOnClick={true}
                  rtl={false}
                  limit={2}
                  pauseOnFocusLoss={true}
                  pauseOnHover={true}
                  transition={Slide}
                />
              </FetchingDataContainer.Provider>
            </ModalProvider>
          </VoterContainer.Provider>
        </FeatureFlagsContainer.Provider>
      </AnalyticsContainer.Provider>
    </ContactContainer.Provider>
  </AddressContainer.Provider>
</HashRouter>)

export function Routes() {
  return (
    <>
      <HashRouter basename={'/'}>
        <Providers>
          <Switch>
            <Route path="/" component={() => <PreLaunchView />} />
          </Switch>
        </Providers>
      </HashRouter>
    </>
  );
}