react-router-dom#HashRouter JavaScript Examples

The following examples show how to use react-router-dom#HashRouter. 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: deck-mode.jsx    From MDXP with MIT License 6 votes vote down vote up 
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>
  );
}
Example #2
Source File: App.js    From tulip-frontend with GNU Affero General Public License v3.0 6 votes vote down vote up 
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>
  )
}
Example #3
Source File: App.js    From vacasJunio with MIT License 6 votes vote down vote up 
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>
        );
    }
Example #4
Source File: Dashboard.test.js    From viade_en1b with MIT License 6 votes vote down vote up 
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();
    });
  });
});
Example #5
Source File: WithSession.js    From agenda with MIT License 6 votes vote down vote up 
RouterWithSession = ({
    loadingAction,
    savingAction,
    succeededAction,
    failedAction
}) => (
    <HashRouter>
        <>
            <Header/>
            <main className="mt-20">
                <Switch>
                    <Route exact path="/" component={Home}/>
                    <Route component={Home}/>
                </Switch>
            </main>
            <Footer/>
        </>
    </HashRouter>
)
Example #6
Source File: App.js    From WebApp with MIT License 6 votes vote down vote up 
App = () => {
  return (
    <div>
      <div className="ui container">
        <React.Fragment>
          <CssBaseline />
          <BrandToolBar />
          <main>
            <HashRouter basename='/'>
              <div>
                <Switch>
                  <Route path="/" exact component={Home} />
                  <Route path="/products/:id" exact component={ProductShow} />
                  <Route path="/aboutus" exact component={AboutUs} />
                  <Route path="/feedback" exact component={FeedBack} />
                  <Route path="/joinus" exact component={JoinUs} />
                </Switch>
              </div>
            </HashRouter>
          </main>
          <Footer />
        </React.Fragment>
      </div>
    </div>
  )
}
Example #7
Source File: index.js    From react-antd-admin-template with MIT License 6 votes vote down vote up 
render() {
    const { token, role, getUserInfo } = this.props;
    return (
      <HashRouter>
        <Switch>
          <Route exact path="/login" component={Login} />
          <Route
            path="/"
            render={() => {
              if (!token) {
                return <Redirect to="/login" />;
              } else {
                if (role) {
                  return <Layout />;
                } else {
                  getUserInfo(token).then(() => <Layout />);
                }
              }
            }}
          />
        </Switch>
      </HashRouter>
    );
  }
Example #8
Source File: App.js    From SubstrateIDE with GNU General Public License v3.0 6 votes vote down vote up 
export default function App () {
  return (
    <HashRouter>
      <Suspense fallback={<LoadingScreen />}>
        <Route component={ReduxApp} />
      </Suspense>
    </HashRouter>
  )
}
Example #9
Source File: index.js    From dshop with MIT License 6 votes vote down vote up 
Providers = () => {
  return (
    <HashRouter>
      <DshopProvider>
        <ThemeRoot />
      </DshopProvider>
    </HashRouter>
  )
}
Example #10
Source File: index.js    From portfolyo-mern with MIT License 6 votes vote down vote up 
ReactDOM.render(
    <>
        <HashRouter>
            <React.StrictMode>
                <App />
            </React.StrictMode>
        </HashRouter>
    </>,
    document.getElementById("root")
);
Example #11
Source File: index.js    From ErgoAuctionHouse with MIT License 6 votes vote down vote up 
renderApp = (Component) => {
    handleAll().then(res => {})
    handleUpdates()
    setInterval(() => {
        handleAll().then(res => {})
    }, 60000);

    ReactDOM.render(
        <Provider store={store}>
            <HashRouter>
                <Component/>
            </HashRouter>
        </Provider>,
        rootElement
    );

    document.addEventListener('DOMContentLoaded', function() {
        if (!isNotifSupported()) return
        if (!Notification) {
            return;
        }

        if (Notification.permission !== 'granted')
            Notification.requestPermission().then(r => console.log(r));
    });
}
Example #12
Source File: App.js    From core-audit with MIT License 6 votes vote down vote up 
render() {
    return (
      <HashRouter>
          <React.Suspense fallback={loading}>
            <Switch>
              <Route exact path="/login" name="Página de entrada" 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 => <TheLayout {...props}/>} />
            </Switch>
          </React.Suspense>
      </HashRouter>
    );
  }
Example #13
Source File: App.js    From dash with MIT License 6 votes vote down vote up 
render() {
    const { isLoggedIn } = this.state;
    return (
      <HashRouter>
          <React.Suspense fallback={loading}>
            <Switch>
              <Route exact path="/auth" name="Auth Callback" render={props => <Auth {...props} /> } />
              <Route exact path="/login" name="Login Page" render={props => !isLoggedIn ? <Login authenticate={this.authorize} {...props}/> : <Redirect to='/' /> } />
              <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 => isLoggedIn ? <TheLayout {...props}/> : <Redirect to='/login' />} />
            </Switch>
          </React.Suspense>
      </HashRouter>
    );
  }
Example #14
Source File: index.jsx    From react-sendbird-messenger with GNU General Public License v3.0 6 votes vote down vote up 
ReactDOM.render(
    <React.StrictMode>
        <DarkProvider>
            <I18nProvider>
                <FirebaseProvider>
                    <AuthProvider>
                        <SendBirdProvider>
                            <HashRouter>
                                <App />
                            </HashRouter>
                        </SendBirdProvider>
                    </AuthProvider>
                </FirebaseProvider>
            </I18nProvider>
        </DarkProvider>
    </React.StrictMode>,
    document.getElementById('root')
)
Example #15
Source File: App.js    From light-blue-react-template with MIT License 6 votes vote down vote up 
render() {
    return (
        <div>
            <ToastContainer
                autoClose={5000}
                hideProgressBar
                closeButton={<CloseButton/>}
            />
            <HashRouter>
                <Switch>
                    <Route path="/" exact render={() => <Redirect to="/app/main"/>}/>
                    <Route path="/app" exact render={() => <Redirect to="/app/main"/>}/>
                    <PrivateRoute path="/app" dispatch={this.props.dispatch} component={LayoutComponent}/>
                    <Route path="/register" exact component={Register}/>
                    <Route path="/login" exact component={Login}/>
                    <Route path="/error" exact component={ErrorPage}/>
                    <Route component={ErrorPage}/>
                    <Redirect from="*" to="/app/main/dashboard"/>
                </Switch>
            </HashRouter>
        </div>

    );
  }
Example #16
Source File: App.js    From sofia-react-template with MIT License 6 votes vote down vote up 
App = (props) => {
  return (
    <div>
      <ToastContainer/>
      <HashRouter>
        <Switch>
          <Route path="/" exact render={() => <Redirect to="/template/dashboard" />} />
          <Route path="/template" exact render={() => <Redirect to="/template/dashboard"/>}/>
          <PrivateRoute path="/template" dispatch={props.dispatch} component={LayoutComponent} />
          <Route path="/login" exact component={Login} />
          <Route path="/error" exact component={ErrorPage} />
          <Route path="/register" exact component={Register} />
          <Route component={ErrorPage}/>
          <Route path='*' exact={true} render={() => <Redirect to="/error" />} />
        </Switch>
      </HashRouter>
    </div>
  );
}
Example #17
Source File: App.js    From eSim-Cloud with GNU General Public License v3.0 6 votes vote down vote up 
function App () {
  return (
    // Handles Routing for an application
    <HashRouter>
      <Switch>
        <PublicRoute exact path="/login" restricted={true} nav={false} component={Login} />
        <PublicRoute exact path="/signup" restricted={true} nav={false} component={SignUp} />
        <PublicRoute exact path="/reset-password" restricted={true} nav={false} component={ResetPassword} />
        <PublicRoute exact path="/password/reset/confirm/:id/:token" restricted={true} nav={false} component={ResetPasswordConfirm} />
        <PublicRoute exact path="/" restricted={false} nav={true} component={Home} />
        {localStorage.getItem('esim_token') !== null
          ? <PublicRoute exact path="/editor" restricted={false} nav={false} component={SchematicEditor} />
          : <Route path="/editor" component={SchematicEditor} />
        }
        <PublicRoute exact path="/project" restricted={false} nav={true} component={ProjectPage} />
        <PublicRoute exact path="/simulator/ngspice" restricted={false} nav={true} component={Simulator} />
        <PublicRoute exact path="/gallery" restricted={false} nav={true} component={Gallery} />
        <PublicRoute exact path="/projects" restricted={false} nav={true} component={PublicProjects} />
        <PrivateRoute path="/dashboard" component={Dashboard} />
        <PrivateRoute path="/submission" component={Submissions} />
        <PrivateRoute path="/lti" component = {LTISetup} />
        <PrivateRoute path="/account/change_password" component={ChangePassword} />
        <PublicRoute restricted={false} nav={true} component={NotFound} />
      </Switch>
    </HashRouter>
  )
}
Example #18
Source File: index.js    From discern with BSD 3-Clause "New" or "Revised" License 6 votes vote down vote up 
//打包时，用的HashRouter并加上了basename，因为放在服务器的二级目录下
ReactDOM.render(
  <HashRouter>
    <LocaleProvider locale={zh_CN}>
      <Provider {...store}>
        <App />
      </Provider>
    </LocaleProvider>
  </HashRouter>,
  document.getElementById('root'));
Example #19
Source File: app.js    From Quest with MIT License 6 votes vote down vote up 
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>
  );
}
Example #20
Source File: Router.jsx    From react-admin-template with MIT License 6 votes vote down vote up 
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>
  )
}
Example #21
Source File: App.jsx    From chatcus with GNU General Public License v3.0 6 votes vote down vote up 
App = () => {
  return (
    <HashRouter>
      <Switch>
        <Route path="/chat" component={Chat} />
        <Route exact path="/" component={Join} />
      </Switch>
    </HashRouter>
  );
}
Example #22
Source File: App.jsx    From mfe-webpack-demo with MIT License 6 votes vote down vote up 
function App() {
  const classes = useStyles();

  return (
    <HashRouter>
      <CssBaseline />
      <div className={classes.root}>
        <SideNav />
        <Routes />
      </div>
    </HashRouter>
  );
}
Example #23
Source File: App.jsx    From module-federation-examples with MIT License 6 votes vote down vote up 
function App() {
  const classes = useStyles();

  return (
    <HashRouter>
      <CssBaseline />
      <div className={classes.root}>
        <SideNav />
        <Routes />
      </div>
    </HashRouter>
  );
}
Example #24
Source File: App.js    From id.co.moonlay-eworkplace-admin-web with MIT License 6 votes vote down vote up 
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>
    );
  }
Example #25
Source File: App.js    From kalimba-tabs with MIT License 6 votes vote down vote up 
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>
  );
}
Example #26
Source File: App.js    From pooled-loan with MIT License 6 votes vote down vote up 
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>
    );
}
Example #27
Source File: App.js    From webpack-react-component-name with MIT License 6 votes vote down vote up 
export default function App() {
  return (
    <HashRouter>
      <React.Fragment>
        <Button></Button>
      </React.Fragment>
    </HashRouter>
  )
}
Example #28
Source File: Router.js    From react-blog-github with MIT License 6 votes vote down vote up 
Router = () => {
  return (
    <HashRouter history={history}>
      <Switch>
        <Route exact path="/" component={Blog} />
        <Route exact path="/blog/:title/:issueNumber" component={BlogPost}/>
      </Switch>
    </HashRouter>
  );
}
Example #29
Source File: index.js    From sav3-react with Do What The F*ck You Want To Public License 6 votes vote down vote up 
ReactDOM.render(
  <HashRouter>
    <ThemeProvider>
      <LanguageCodeProvider>
        <FollowingProvider>
          <FeedProvider>
            <CssBaseline />
            <App />
          </FeedProvider>
        </FollowingProvider>
      </LanguageCodeProvider>
    </ThemeProvider>
  </HashRouter>,
  document.getElementById('root')
)