react-router-dom#HashRouter JavaScript Examples

App = () => (
  <HashRouter>
    <div>
      <h1>App 1</h1>
      <Navigation />
      <React.Suspense fallback={<div>Loading...</div>}>
        <Switch>
          {routes.map(route => (
            <Route
              key={route.path}
              path={route.path}
              component={route.component}
              exact={route.exact}
            />
          ))}
        </Switch>
      </React.Suspense>
    </div>
  </HashRouter>
)

export default function App() {
  return (
    <HashRouter>
      <React.Fragment>
        <Footer></Footer>
      </React.Fragment>
    </HashRouter>
  )
}

export default function App() {
    const routes = (
        <Switch>
            <Route path="/" exact>
                <HomePage />
            </Route>
            <Route path="/home" exact>
                <ViewPool />
            </Route>
            <Route path="/create-pool" exact>
                <CreatePool />
            </Route>
            <Route path="/view/:lendingPool/:loanPoolAddress" exact>
                <ViewPool />
            </Route>
            <Route path="/swap-token" exact>
                <SwapTokens />
            </Route>
            <Redirect to="/" />
        </Switch>
    );

    return (
        <div className="App">
            <HashRouter history={history}>
                <Header/>
                {routes}
            </HashRouter>
        </div>
    );
}

function App() {
  return (
    <Provider store={store}>
      <div className="App">
        <MenuBar />
        <HashRouter history={history}>
          <Switch>
            <Route exact path="/" component={HomeScreen} />
            <Route path="/tabcreator/" component={TabCreator} />
          </Switch>
        </HashRouter>
      </div>
    </Provider>
  );
}

render() {
    return (
      <HashRouter>
          <React.Suspense fallback={loading()}>
            <Switch>

            <Route exact path="/absensi/listallabsen" name="Test Page" render={props => <ListAllAbsen {...props}/>} />
            <Route exact path="/absensi/testlur" name="Test Page" render={props => <TestLur {...props}/>} />
            <Route exact path="/absensi/workfromhome" name="Edit Account Page" render={props => <ListWorkFromHome {...props}/>} />
            <Route exact path="/absensi/workatclient" name="Edit Account Page" render={props => <ListWorkAtClient {...props}/>} />
            <Route exact path="/absensi/sick" name="Edit Account Page" render={props => <ListSick {...props}/>} />
            <Route exact path="/absensi/belumabsen" name="Edit Account Page" render={props => <ListBelomAbsen {...props}/>} />
            <Route exact path="/absensi/atoffice" name="Edit Account Page" render={props => <ListAtOffice {...props}/>} />
            <Route exact path="/absensi/approval" name="Edit Account Page" render={props => <ListApproval {...props}/>} />
            
            <Route exact path="/division/listdivision" name="List Division Page" render={props => <ListDivision {...props}/>} />
            <Route exact path="/jobtitle/listjobtitle" name="List Division Page" render={props => <ListJobtitle {...props}/>} />
            <Route exact path="/role/listrole" name="List Division Page" render={props => <ListRole {...props}/>} />
            
            {/* <Route exact path="/account/editaccount/:id" name="Edit Account Page" render={props => <Editaccount {...props}/>} /> */}
            <Route exact path="/account/listaccount" name="List Account Page" render={props => <ListAccount {...props}/>} />
            <Route exact path="/account/addaccount" name="Add Account Page" render={props => <AddAccount {...props}/>} />
              
              <Route exact path="/login" name="Login Page" render={props => <Login {...props}/>} />
              <Route exact path="/register" name="Register Page" render={props => <Register {...props}/>} />
              <Route exact path="/404" name="Page 404" render={props => <Page404 {...props}/>} />
              <Route exact path="/500" name="Page 500" render={props => <Page500 {...props}/>} />
              <Route path="/" name="Home" render={props => <DefaultLayout {...props}/>} />
            </Switch>
          </React.Suspense>
      </HashRouter>
    );
  }

App = () => (
  <HashRouter>
    <div>
      <h1>App 2</h1>
      <Navigation />
      <React.Suspense fallback={<div>Loading...</div>}>
        <Switch>
          {routes.map(route => (
            <Route
              key={route.path}
              path={route.path}
              component={route.component}
              exact={route.exact}
            />
          ))}
        </Switch>
      </React.Suspense>
    </div>
  </HashRouter>
)

export default function App() {
  return (
    <HashRouter>
      <React.Fragment>
        <Foo></Foo>
      </React.Fragment>
    </HashRouter>
  )
}

function App() {
  return (
    <HashRouter>
      <ThemeProvider theme={theme}>
        <React.Suspense fallback={null}>
          <Page title="Material UI App">
            <Typography variant="h6">Dialog Component</Typography>
            <Dialog />
            <Divider style={{ margin: '16px 0' }} />
            <Typography variant="h6">Tabs Component</Typography>
            <Tabs />
          </Page>
        </React.Suspense>
      </ThemeProvider>
    </HashRouter>
  );
}

DeckMode = ({
  children,
  extracted,
  keyboardTarget,
  touchTarget,
  slideNavigation = true,
  modeNavigation = true,
  ...props
}) => {
  const basepath = props.basepath ? props.basepath : '';
  const slides = React.Children.toArray(children);

  return (
    <HashRouter {...props}>
      <RootState mode={deckModes.NORMAL} basepath={basepath} extracted={extracted} slideLength={slides.length}>
        <Switch>
          <Redirect exact from="/" to={deckModes.properties[deckModes.NORMAL].path} />
          {
            deckModes.properties.map(({Component, name, path}) => (
              <Route path={`/${path}`} key={name}>
                <Component
                  keyboardTarget={keyboardTarget}
                  touchTarget={touchTarget}
                  slideNavigation={slideNavigation}
                  modeNavigation={modeNavigation}
                >
                  {slides}
                </Component>
              </Route>
            ))
          }
        </Switch>
      </RootState>
    </HashRouter>
  );
}

function App() {
  const classes = useStyles();

  return (
    <HashRouter>
      <CssBaseline />
      <div className={classes.root}>
        <SideNav />
        <Routes />
      </div>
    </HashRouter>
  );
}

App = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/chat" component={Chat} />
        <Route exact path="/" component={Join} />
      </Switch>
    </HashRouter>
  );
}

function Router(props) {
  const { token, A_getUserInfo } = props
  return (
    <HashRouter>
      <Switch>
        <Route component={Login} exact path="/login" />
        <Route
          path="/"
          render={() => {
            if (!token) {
              return <Redirect to="/login" />
            } else {
              if (props.role) {
                return <Layout />
              } else {
                A_getUserInfo(token).then(() => <Layout />)
              }
            }
          }}
        />
      </Switch>
    </HashRouter>
  )
}

function App({ store }) {
  return (
    <ReactQueryConfigProvider config={queryConfig}>
      <HashRouter>
        <ErrorBoundary
          displayStacktrace
          message={
            <div>
              <ExternalLink href="https://github.com/hverlin/Quest/issues">
                Report an issue on Github
              </ExternalLink>
            </div>
          }
        >
          <AppBody store={store} />
        </ErrorBoundary>
      </HashRouter>
    </ReactQueryConfigProvider>
  );
}

//打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
ReactDOM.render(
  <HashRouter>
    <LocaleProvider locale={zh_CN}>
      <Provider {...store}>
        <App />
      </Provider>
    </LocaleProvider>
  </HashRouter>,
  document.getElementById('root'));

function App() {
  return (
    <UserProvider>
      <HashRouter>
        <div className="App">
          <header className="App-header">
            <div>
              <Route exact path="/" component={Login} />
              <AuthorizedRoute path="/home" component={Home} />
              <Route path="/SignUp" component={SignUp} />
            </div>
          </header>
        </div>
      </HashRouter>
    </UserProvider>
  );
}

WebAppNavigator = ({ params }) => {
  useEffect(() => {
    // let userID = getLocalData(webConstants.USER_ID);
    // if (userID && userID != null && userID != "") {
    //   window.location = "/home";
    // }
  }, []);

  return (
    <ThemeProvider theme={themeConfig}>
      <HashRouter>
        <Switch> 
          <Route path="/chat" exact component={WebHomeScreen} />
          <Route path="/" component={ScanCodeView} />
        </Switch>
      </HashRouter>
    </ThemeProvider>
  );
}

Root = () => {
  useEffect(() => {
    const unsubscribeHashChange = window.addEventListener('hashchange', () => {
      window.parent.postMessage(location.hash, '*'); // eslint-disable-line
    });
    return () => unsubscribeHashChange && unsubscribeHashChange();
  }, []);

  return (<HashRouter basename="/">
    <StylesProvider generateClassName={generateClassName}>
      <Styled.RootElement id="jafar-react-layout-demos">
        <Styled.GlobalStyle />
        <Styled.Header>
          <Styled.InternalLink id="logo" to={deafultDemoRoute}>
            <Styled.Logo src={require('./jafar.svg')} />
            <Styled.LogoText>Jafar | React Layout Demos</Styled.LogoText>
          </Styled.InternalLink>
          <Styled.HeaderLinks>
            <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_DOCS}>Docs</Styled.ExternalLink>
            <Styled.ExternalLink href={process.env.REACT_APP_JAFAR_GIT}>GitHub</Styled.ExternalLink>
          </Styled.HeaderLinks>
        </Styled.Header>
        <Route exact={true} path="/" render={shouldRedirect} />
        <Route 
          path="/:levelA/:levelB" 
          render={props => (<Styled.Wrapper id="demos"><Demos match={props.match} /></Styled.Wrapper>)} />
        {shouldRedirect()}
      </Styled.RootElement>
    </StylesProvider>
  </HashRouter>);
}

// /login -> login
// / -> admin

function App() {
  return (
    <div className="App">
      <HashRouter>
          <Switch>
              <Route path={"/login"} component={Login}/>
              <Route path={"/"} component={Admin}/>
          </Switch>
      </HashRouter>
    </div>
  );
}

AppRoutes = (props) => {
    const { background } = props.appctx;
    return (<div className={`main-container ${props.closedState ? 'closed': 'open'} ${background}`}>
        <HashRouter>
            <Switch>
                <Route path="/home" exact component={HomeContainer} />
                <Route path="/ruleset" exact component={RulesetContainer} />
                <Route path="/create-ruleset" exact component={CreateRulesetContainer} />
                <Route path="/appearance" exact component={AppearanceContainer} />
            </Switch>   
        </HashRouter>
    </div>);

}

render() {
    const mQueryView = (props) => {
      return (
        <QueryView
          data={this.state.config.queryview}
          serverBasePath={this.serverBasePath}
        />
      );
    };
    return (
      <HashRouter>
        {this.state.config && (
          <div>
            <Header data={this.state.config.header}></Header>
            <main className="container-fluid p10">
              <Route exact path="/" component={mQueryView} />
              <Route exact path="/ex" component={TestView} />
            </main>
          </div>
        )}

        <div id="footer">
          <Footer />
        </div>
      </HashRouter>
    );
  }

function App() {
  return (
    <HashRouter>
      <ThemeProvider theme={theme}>
        <React.Suspense fallback={null}>
          <Page title="Material UI App">
            <Typography variant="h6">Dialog Component</Typography>
            <Dialog />
            <Divider style={{ margin: "16px 0" }} />
            <Typography variant="h6">Tabs Component</Typography>
            <Tabs />
          </Page>
        </React.Suspense>
      </ThemeProvider>
    </HashRouter>
  );
}

ReactDOM.render(
  <HashRouter>
    <ThemeProvider>
      <LanguageCodeProvider>
        <FollowingProvider>
          <FeedProvider>
            <CssBaseline />
            <App />
          </FeedProvider>
        </FollowingProvider>
      </LanguageCodeProvider>
    </ThemeProvider>
  </HashRouter>,
  document.getElementById('root')
)

Router = () => {
  return (
    <HashRouter history={history}>
      <Switch>
        <Route exact path="/" component={Blog} />
        <Route exact path="/blog/:title/:issueNumber" component={BlogPost}/>
      </Switch>
    </HashRouter>
  );
}

export default function App() {
  return (
    <HashRouter>
      <React.Fragment>
        <div className="todoapp">
          <Route path="/:filter?" component={TodoList} />
        </div>
        <Footer />
      </React.Fragment>
    </HashRouter>
  );
}

Providers = () => {
  return (
    <HashRouter>
      <Web3ReactProvider getLibrary={getLibrary}>
        <Web3ReactNetworkProvider getLibrary={getLibrary}>
          <DshopProvider>
            <PreviewBanner
              wrapperClassName="text-sm py-2 bg-white text-black"
              className="container flex justify-between"
            />
            <Switch>
              <Route path="/order" component={Confirmation} />
              <Route component={Storefront} />
            </Switch>
          </DshopProvider>
        </Web3ReactNetworkProvider>
      </Web3ReactProvider>
    </HashRouter>
  )
}

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <AppStateProvider>
        <WalletProvider>
          <HashRouter>
            <Main
              assetsUrl="./public/aragon-ui"
              layout={false}
              scrollView={false}
              theme={theme}
            >
              <GlobalErrorHandler>
                <MainView>
                  {/* <AppLoader> */}
                  <Routes />
                  {/* </AppLoader> */}
                </MainView>
              </GlobalErrorHandler>
            </Main>
          </HashRouter>
        </WalletProvider>
      </AppStateProvider>
    </QueryClientProvider>
  )
}

render(){
        return(
            <HashRouter basename = '/'>
                <>
                    <Navbar />
                </>
                <Route exact path={"/"} component={Galeria}/>
                <Route exact path={"/404"} component={Prox}/>
                <Route path ="/listasimple" component={ListaSimple}/>
                <Route path ="/listadoble" component={ListaDoble}/>
                <Route path ="/listacircularsimpleenlazada" component={ListaCircularSimple}/>
                <Route path ="/listacirculardobleenlazada" component={ListaCicularDoble}/>
                <Route path ="/pila" component={Pila}/>
                <Route path ="/cola" component={Cola}/>
                <Route path ="/coladeprioridad" component={ColaPriori}/>
                <Route path ="/burbuja" component={Burbuja}/>
                <Route path ="/seleccion" component={Seleccion}/>
                <Route path ="/insercion" component={Insercion}/>
                <Route path ="/rapido" component={Rapido}/>
                <Route path ="/abb" component={ABB}/>
                <Route path ="/avl" component={AVL}/>
                <Route path ="/arbolb" component={ArbolB}/>
                <Route path ="/arbolb+" component={ArbolBmas}/>
                <Route path ="/arbolmerkle" component={ArbolMerkle}/>
            </HashRouter>
        );
    }

describe("Dashboard Component", () => {
  let wrapper;
  const mockFn = jest.fn();
  beforeEach(() => {
    const initState = {
      route: {},
      auth: {},
      user: {},
      control: {},
    };
    const store = testStore(rootReducer, initState);
    const { container } = render(
      <Provider store={store}>
        <IntlProvider key={"en"} locale={"en"} messages={locales["en"]}>
          <HashRouter>
            <Dashboard
              routes={[]}
              selectedRoute={""}
              showRoute={() => mockFn}
            ></Dashboard>
          </HashRouter>
        </IntlProvider>
      </Provider>
    );
    wrapper = container;
  });

  test("renders correctly", () => {
    waitForElement(() => {
      expect(queryByTestId(wrapper, "dashboard-container")).not.toBeNull();
    });
  });
});

RouterWithSession = ({
    loadingAction,
    savingAction,
    succeededAction,
    failedAction
}) => (
    <HashRouter>
        <>
            <Header/>
            <main className="mt-20">
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route component={Home}/>
                </Switch>
            </main>
            <Footer/>
        </>
    </HashRouter>
)