react-router-dom#BrowserRouter TypeScript Examples

The following examples show how to use react-router-dom#BrowserRouter. 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.tsx    From one-platform with MIT License 6 votes vote down vote up
App = () => {
  return (
    <Provider value={client}>
      <RecentVisitProvider>
        <BrowserRouter basename={config.baseURL}>
          <BreadcrumbProvider>
            <Suspense fallback={<Loader />}>
              <opc-provider>
                <opc-nav />
                <opc-menu-drawer />
                <opc-notification-drawer />
                <opc-feedback />
              </opc-provider>
              <Router />
            </Suspense>
          </BreadcrumbProvider>
        </BrowserRouter>
      </RecentVisitProvider>
    </Provider>
  );
}
Example #2
Source File: _app.tsx    From Demae with MIT License 6 votes vote down vote up
Router = ({ location, children }: { location: string, children: any }) => {
	if (process.browser) {
		return (
			<BrowserRouter>
				{children}
			</BrowserRouter>
		)
	} else {
		return (
			<StaticRouter location={location}>
				{children}
			</StaticRouter>
		)
	}
}
Example #3
Source File: CustomBrowserRouter.tsx    From firetable with Apache License 2.0 6 votes vote down vote up
CustomBrowserRouter: React.FC<ICustomBrowserProps> = ({ children }) => (
  <BrowserRouter>
    <Route>
      {(routeProps) => (
        <RouterContext.Provider value={routeProps}>
          {children}
        </RouterContext.Provider>
      )}
    </Route>
  </BrowserRouter>
)
Example #4
Source File: index.tsx    From typed-react-form with MIT License 6 votes vote down vote up
function Router() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/object-types" component={OneOfObjectForm} />
                <Route path="/object-types-array" component={OneOfObjectArrayForm} />
                <Route path="/custom-inputs" component={CustomInputsForm} />
                <Route path="/field" component={FieldForm} />
                <Route path="/" component={ExampleForm} />
            </Switch>
        </BrowserRouter>
    );
}
Example #5
Source File: App.tsx    From TutorBase with MIT License 6 votes vote down vote up
function App() {
    return (
        <BrowserRouter>
            <Switch>
                <Route exact path="/">
                    <LoginPage/>
                </Route>
                <Route exact path="/login">
                    <LoginPage/>
                </Route>
                <Route exact path="/signup">
                    <SignUpPage/>
                </Route>
                <Route exact path="/tutor/" >
                    <Dashboard mode="Tutor"/>
                </Route>
                <Route exact path="/tutor/*" >
                    <Dashboard mode="Tutor"/>
                </Route>
                <Route exact path="/home/" >
                    <Dashboard mode="Client"/>
                </Route>
                <Route exact path="/home/*" >
                    <Dashboard mode="Client"/>
                </Route>
            </Switch>
            {/*<ToastProvider*/}
            {/*    placement="top-right"*/}
            {/*    autoDismissTimeout={3000}*/}
            {/*    autoDismiss={true}*/}
            {/*>*/}
            {/*</ToastProvider>*/}
        </BrowserRouter>
    );
}
Example #6
Source File: routes.tsx    From NLW-3.0 with MIT License 6 votes vote down vote up
function Routes() {
	return (
		<BrowserRouter>
			<Switch>
				<Route path="/" exact component={Landing} />
				<Route path="/app" component={OrphanegesMap} />

        <Route path="/orphanages/create" component={CreateOrphanage} />
        <Route path="/orphanages/:id" component={Orphanege} />
			</Switch>
		</BrowserRouter>
	);
}
Example #7
Source File: App.tsx    From GTAV-NativeDB with MIT License 6 votes vote down vote up
export default function App() {
  return (
    <StoreProvider store={store}>
      <PersistGate loading={null} persistor={persistor}>
        <OnlineStatusProvider>
          <BrowserRouter>
            <Theme>
              <CssBaseline />
              <NativeLoader />
              <LoadGate />
            </Theme>
          </BrowserRouter>
        </OnlineStatusProvider>
      </PersistGate>
    </StoreProvider>
  )
}
Example #8
Source File: App.tsx    From gobarber-web with MIT License 6 votes vote down vote up
App: React.FC = () => {
  return (
    <BrowserRouter>
      <AppProvider>
        <Routes />
      </AppProvider>

      <GlobalStyle />
    </BrowserRouter>
  );
}
Example #9
Source File: routes.tsx    From happy with MIT License 6 votes vote down vote up
function Routes() {
  return (
    <BrowserRouter>
      <Switch>
        <Route path="/" exact component={Landing} />
        <Route path="/app" component={OrphanagesMap} />

        <Route path="/orphanages/create" component={CreateOrphanage} />
        <Route path="/orphanages/:id" component={Orphanage} />
      </Switch>
    </BrowserRouter>
  );
}
Example #10
Source File: AppRouter.tsx    From Tiquet with MIT License 6 votes vote down vote up
AppRouter = ({
  cookiesModalVisible,
}: IAppRouter): JSX.Element => (
  <Fragment>
    <BrowserRouter>
      {cookiesModalVisible && <CookiesModal />}
      <Suspense fallback={<Loading display />}>
        <Switch>
          <Route path="/" component={Landing} exact />
          <Route path="/home" component={Landing} />
          <Route path="/auth/callback" component={AuthCallback} />
          <Route path="/auth" component={Auth} />
          <Fragment>
            <Navbar />
            <ProtectedRoute path="/b/:id" component={Board} />
            <ProtectedRoute path="/boards" component={Boards} />
          </Fragment>
        </Switch>
      </Suspense>
    </BrowserRouter>
  </Fragment>
)
Example #11
Source File: router.tsx    From video-chat with MIT License 6 votes vote down vote up
export default function Router(){
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home/>}/>
        <Route path="/meet" element={<Meet/>} />
      </Routes>
    </BrowserRouter>
  )
}
Example #12
Source File: List.test.tsx    From frontend with GNU General Public License v3.0 6 votes vote down vote up
describe('List', () => {
  test('render List component', () => {
    const data = [
      { id: 0, txt: 'Build up your team or find your code buddie' },
      { id: 1, txt: 'Improve your skills and work on amazing IT projects' },
      {
        id: 2,
        txt: 'Find support you need and help other people',
        link: {
          text: 'and more!',
          url: '/',
        },
      },
    ];

    const { getByTestId } = render(
      <BrowserRouter>
        <StyledList icon={listItemIcon} items={data} />
      </BrowserRouter>
    );
    expect(getByTestId('list')).toBeInTheDocument();
  });

  test('render List component without link', () => {
    const data = [
      { id: 0, txt: 'Build up your team or find your code buddie' },
      { id: 1, txt: 'Improve your skills and work on amazing IT projects' },
      { id: 2, txt: 'Find support you need and help other people' },
    ];

    const { getByTestId } = render(<StyledList icon={listItemIcon} items={data} />);
    expect(getByTestId('list')).toBeInTheDocument();
  });
});
Example #13
Source File: App.tsx    From vite-react-ts with MIT License 6 votes vote down vote up
App = () => {
  return (
    <Suspense fallback={<Spin size="large" className="layout__loading" />}>
      {/* <Authority> */}
      <BrowserRouter>{renderRoutes(routes)}</BrowserRouter>
      {/* </Authority> */}
    </Suspense>
  );
}
Example #14
Source File: index.tsx    From taskcafe with MIT License 6 votes vote down vote up
App = () => {
  const [user, setUser] = useState<string | null>(null);

  return (
    <>
      <UserContext.Provider value={{ user, setUser }}>
        <ThemeProvider theme={theme}>
          <NormalizeStyles />
          <BaseStyles />
          <BrowserRouter>
            <PopupProvider>
              <Routes />
            </PopupProvider>
          </BrowserRouter>
          <ToastedContainer
            position="bottom-right"
            autoClose={5000}
            hideProgressBar
            newestOnTop
            closeOnClick
            rtl={false}
            pauseOnFocusLoss
            draggable
            pauseOnHover
            limit={5}
          />
        </ThemeProvider>
      </UserContext.Provider>
    </>
  );
}
Example #15
Source File: App.tsx    From atlas with GNU General Public License v3.0 6 votes vote down vote up
App = () => {
  // App doesn't accept props and doesn't contain state so should never rerender
  const apolloClient = createApolloClient()

  return (
    <>
      <GlobalStyles />
      <AnalyticsManager />
      <ApolloProvider client={apolloClient}>
        <BrowserRouter>
          <OperatorsContextProvider>
            <OverlayManagerProvider>
              <ConfirmationModalProvider>
                <ActiveUserProvider>
                  <JoystreamProvider>
                    <NftActionsProvider>
                      <MainLayout />
                      <Snackbars />
                      <AssetsManager />
                      <TransactionManager />
                      <NotificationsManager />
                      <SignInStepsStepper />
                      <NftSettlementBottomDrawer />
                      <NftPurchaseBottomDrawer />
                      <NftSaleBottomDrawer />
                    </NftActionsProvider>
                  </JoystreamProvider>
                </ActiveUserProvider>
              </ConfirmationModalProvider>
            </OverlayManagerProvider>
          </OperatorsContextProvider>
        </BrowserRouter>
      </ApolloProvider>
    </>
  )
}
Example #16
Source File: router.tsx    From microsoft-teams-apps-growyourskills with MIT License 6 votes vote down vote up
AppRoute: React.FunctionComponent<{}> = () => {

    return (
        <Suspense fallback={<div className="container-div"><div className="container-subdiv"></div></div>}>
            <BrowserRouter>
                <Switch>
                    <Route exact path="/" component={DiscoverWrapperPage} />
                    <Route exact path="/discover" component={DiscoverWrapperPage} />
                    <Route exact path="/discover-team" component={DiscoverTeamWrapperPage} />
                    <Route exact path="/configtab" component={TeamsConfigPage} />
                    <Route exact path="/signin" component={SignInPage} />
                    <Route exact path="/signin-simple-start" component={SignInSimpleStart} />
                    <Route exact path="/signin-simple-end" component={SignInSimpleEnd} />
                    <Route exact path="/error" component={ErrorPage} />
                    <Route exact path="/project-closure" component={ProjectClosure} />
                    <Route exact path="/project-dialog" component={CloseProjectDialog} />
                    <Route exact path="/skill-acquired" component={SkillsAquiredTab} />
                    <Route exact path="/add-new-project" component={NewProjectDialog} />
                    <Route exact path="/edit-new-project" component={EditProjectDialog} />
                    <Route exact path="/my-created-projects" component={MyCreatedProjects} />
                    <Route exact path="/my-joined-projects" component={MyJoinedProjects} />
                    <Route exact path="/join-project" component={JoinProject} />
                    <Route exact path="/join-project-success" component={JoinProjectSuccessPage} />
                    <Route exact path="/my-projects" component={MyProjects} />
                    <Route component={Redirect} />
                </Switch>
            </BrowserRouter>
        </Suspense>
    );
}
Example #17
Source File: index.tsx    From Full-Stack-React-TypeScript-and-Node with MIT License 6 votes vote down vote up
ReactDOM.render(
  <Provider store={configureStore()}>
    <BrowserRouter>
      <ApolloProvider client={client}>
        <ErrorBoundary>{[<App key="App" />]}</ErrorBoundary>
      </ApolloProvider>
    </BrowserRouter>
  </Provider>,
  document.getElementById("root")
);
Example #18
Source File: index.tsx    From rari-dApp with GNU Affero General Public License v3.0 6 votes vote down vote up
ReactDOM.render(
  <>
    <PWAPrompt
      timesToShow={2}
      permanentlyHideOnDismiss={false}
      copyTitle="Add Rari to your homescreen!"
      copyBody="The Rari Portal works best when added to your homescreen. Without doing this, you may have a degraded experience."
      copyClosePrompt="Close"
    />
    <ChakraProvider theme={customTheme}>
      <ErrorBoundary FallbackComponent={ErrorPage}>
        <QueryClientProvider client={queryClient}>
          <ReactQueryDevtools initialIsOpen={false} />
          <BrowserRouter>
            <RariProvider>
              <ScrollToTop />
              <App />
            </RariProvider>
          </BrowserRouter>
        </QueryClientProvider>
      </ErrorBoundary>
    </ChakraProvider>
  </>,
  document.getElementById("root")
);
Example #19
Source File: index.tsx    From NetStatus with MIT License 6 votes vote down vote up
function Render(): JSX.Element {
    const routesComponents = Object.values(routes).map(
        ((route: IRoute) => {
            return <Route 
                key={'route-'+route.path}
                exact
                path={route.path}
                render={route.component}
            />
        })
    )

    return (
        <BrowserRouter>
            <BrowserHistory.ReactRouterSaveHistory />
            <Switch>
                {routesComponents}
                <Redirect from="" to={loading.path} />
            </Switch>
        </BrowserRouter>
    )
}
Example #20
Source File: BagModal.test.tsx    From Fashionista with MIT License 6 votes vote down vote up
renderComponent = () => {
  const mockedProps = {
    isOpen: true,
    close: jest.fn(),
  };
  return render(
    <BrowserRouter>
      <BagModal {...mockedProps} />
    </BrowserRouter>
  );
}
Example #21
Source File: App.tsx    From useDApp with MIT License 6 votes vote down vote up
export function App() {
  return (
    <Page>
      <GlobalStyle />
      <BrowserRouter>
        <NavBar />
        <Switch>
          <Route exact path="/balance" component={Balance} />
          <Route exact path="/prices" component={Prices} />
          <Route exact path="/ens" component={ENSExample} />
          <Route exact path="/block" component={Block} />
          <Route exact path="/tokens" component={Tokens} />
          <Route exact path="/send" component={SendEtherPage} />
          <Route exact path="/transactions" component={Transactions} />
          <Route exact path="/web3modal" component={Web3Modal} />
          <Route exact path="/web3react" component={Web3ReactConnector} />
          <Route exact path="/multichain" component={Multichain} />
          <Route exact path="/wallet-connect" component={WalletConnect} />
          <Redirect exact from="/" to="/balance" />
        </Switch>
      </BrowserRouter>
      <NotificationsList />
    </Page>
  )
}
Example #22
Source File: index.tsx    From react-app-architecture with Apache License 2.0 6 votes vote down vote up
Routes = (): ReactElement => {
  // remove the css sent inline in the html on client side
  // useEffect in similar to componentDidMount for function components
  useEffect(() => {
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles && jssStyles.parentNode) jssStyles.parentNode.removeChild(jssStyles);
  }, []);

  return (
    <Provider store={store}>
      <CookiesProvider>
        <BrowserRouter>
          <ThemeProvider theme={theme}>
            <Route component={App} />
          </ThemeProvider>
        </BrowserRouter>
      </CookiesProvider>
    </Provider>
  );
}
Example #23
Source File: App.tsx    From cra-template-typescript-redux with MIT License 6 votes vote down vote up
App: React.FC = () => {
  return (
    <BrowserRouter>
      <Navbar />
      <div className="container">
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/about" component={About} />
        </Switch>
      </div>
    </BrowserRouter>
  )
}
Example #24
Source File: index.tsx    From auth0-react with MIT License 6 votes vote down vote up
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter>
      <Auth0ProviderWithRedirectCallback
        domain={process.env.REACT_APP_DOMAIN}
        clientId={process.env.REACT_APP_CLIENT_ID}
        redirectUri={window.location.origin}
        audience={process.env.REACT_APP_AUDIENCE}
        scope="read:users"
      >
        <App />
      </Auth0ProviderWithRedirectCallback>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);
Example #25
Source File: App.tsx    From fishbowl with MIT License 6 votes vote down vote up
function App() {
  return (
    <BrowserRouter>
      <Layout>
        <Switch>
          <Route exact path={routes.root} component={Home} />
          <Route
            exact
            path={routes.game.pending}
            render={({ match }) => {
              return (
                <Pending
                  joinCode={match.params.joinCode.toLocaleUpperCase()}
                ></Pending>
              )
            }}
          />
          <Route
            path={routes.game.root}
            render={({ match }) => {
              return (
                <GameRoutes
                  joinCode={match.params.joinCode.toLocaleUpperCase()}
                ></GameRoutes>
              )
            }}
          />
          <Route path="*">
            <Redirect to={routes.root}></Redirect>
          </Route>
        </Switch>
      </Layout>
    </BrowserRouter>
  )
}
Example #26
Source File: index.tsx    From moodtracker with MIT License 6 votes vote down vote up
ReactDOM.createRoot(document.getElementById("root")!).render(
  <StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <Routes />
      </Provider>
    </BrowserRouter>
  </StrictMode>
);
Example #27
Source File: routes.tsx    From NextLevelWeek with MIT License 6 votes vote down vote up
function Routes() {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="/" exact component={landing} />
                <Route path="/app" component={OrphanagesMap} />
                <Route path="/orphanages/create" component={OrphanageCreate} />
                <Route path="/orphanages/:id" component={Orphanage} />
            </Switch>
        </BrowserRouter>
    );
}
Example #28
Source File: index.tsx    From cwa-quick-test-frontend with Apache License 2.0 6 votes vote down vote up
ReactDOM.render(
  <React.StrictMode>
    <BrowserRouter >
      <Route path="/:mandant">
        <Root />
      </Route>
    </BrowserRouter>

  </React.StrictMode>,

  document.getElementById('root')
);
Example #29
Source File: index.tsx    From raspiblitz-web with MIT License 6 votes vote down vote up
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <SSEContextProvider>
        <AppContextProvider>
          {/* For persistent toasts over all pages */}
          <ToastContainer />
          <App />
        </AppContextProvider>
      </SSEContextProvider>
    </BrowserRouter>
  </React.StrictMode>
);