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: App.js    From module-federation-examples with MIT License 6 votes vote down vote up 
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>
)
Example #2
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>
        <Footer></Footer>
      </React.Fragment>
    </HashRouter>
  )
}
Example #3
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 #4
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 #5
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 #6
Source File: App.js    From module-federation-examples with MIT License 6 votes vote down vote up 
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>
)
Example #7
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>
        <Foo></Foo>
      </React.Fragment>
    </HashRouter>
  )
}
Example #8
Source File: App.jsx    From module-federation-examples with MIT License 6 votes vote down vote up 
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>
  );
}
Example #9
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 #10
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 #11
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 #12
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 #13
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 #14
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 #15
Source File: App.js    From A2 with GNU General Public License v3.0 6 votes vote down vote up 
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>
  );
}
Example #16
Source File: WebAppNavigator.js    From WhatsApp-Clone with MIT License 6 votes vote down vote up 
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>
  );
}
Example #17
Source File: Root.jsx    From jafar with MIT License 6 votes vote down vote up 
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>);
}
Example #18
Source File: App.js    From one_month_code with Apache License 2.0 6 votes vote down vote up 
// /login -> login
// / -> admin

function App() {
  return (
    <div className="App">
      <HashRouter>
          <Switch>
              <Route path={"/login"} component={Login}/>
              <Route path={"/"} component={Admin}/>
          </Switch>
      </HashRouter>
    </div>
  );
}
Example #19
Source File: app-routes.js    From json-rule-editor with GNU General Public License v3.0 6 votes vote down vote up 
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>);

}
Example #20
Source File: Main.js    From neuralqa with MIT License 6 votes vote down vote up 
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>
    );
  }
Example #21
Source File: App.jsx    From mfe-webpack-demo with MIT License 6 votes vote down vote up 
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>
  );
}
Example #22
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')
)
Example #23
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 #24
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>
        <div className="todoapp">
          <Route path="/:filter?" component={TodoList} />
        </div>
        <Footer />
      </React.Fragment>
    </HashRouter>
  );
}
Example #25
Source File: index.js    From dshop with MIT License 6 votes vote down vote up 
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>
  )
}
Example #26
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 #27
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 #28
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 #29
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>
)