react-router-dom#withRouter TypeScript Examples

The following examples show how to use react-router-dom#withRouter. 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: index.tsx    From interactsh-web with MIT License 6 votes vote down vote up 
AnimatedSwitch = withRouter(({ location }) => {
  window.scrollTo(0, 0);
  document.getElementsByTagName("html")[0].style.overflow = "visible";
  return (
    <TransitionGroup>
      <CSSTransition key={location.pathname} classNames="slide slide" timeout={10}>
        <Switch>
          <Route exact path="/" component={HomePage} />
          <Route exact path="/terms" component={TermsPage} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
})
Example #2
Source File: HOC3.tsx    From generator-earth with MIT License 6 votes vote down vote up 
withRouter(class extends React.Component<RouteComponentProps&MyProps> {
  render() {
    this.props
    return null
  }
})
Example #3
Source File: DemoApp.tsx    From clearflask with Apache License 2.0 6 votes vote down vote up 
ForceUrl = withRouter((props: RouteComponentProps & { forcePathSubscribe: (listener: (forcePath: string) => void) => void }) => {
  props.forcePathSubscribe(forcePath => {
    if (forcePath !== lastForcedPath) {
      setTimeout(() => props.history.push(forcePath!), 1);
      lastForcedPath = forcePath;
    };
  });
  return null;
})
Example #4
Source File: SchemaApp.tsx    From json-schema-viewer with Apache License 2.0 5 votes vote down vote up 
SchemaApp = withRouter<RouteComponentProps, typeof SchemaAppWR>(SchemaAppWR)
Example #5
Source File: app.tsx    From remote-office-hours-queue with Apache License 2.0 5 votes vote down vote up 
AppRouter = withRouter(App)
Example #6
Source File: home.tsx    From config-generator with MIT License 5 votes vote down vote up 
RenderLayout = withRouter(({ history }) => {
  // useEffect(
  //   () =>
  //     history.listen((location, action) => {
  //       window.rudderanalytics.page('Page viewed', 'Page viewed', {
  //         path: location.pathname,
  //         referrer: '',
  //         search: '',
  //         title: '',
  //         url: window.location.href,
  //       });
  //     }),
  //   [],
  // );

  return (
    <Layout >
      <Switch>
        <Route path="/home" exact={true} component={Connections} />
        <Route path="/" exact={true} component={Connections} />
        <Route path="/sources" exact={true} component={Sources} />
        <Route path="/sources/setup" exact={true} component={AddSource} />
        <Route path="/sources/setup/:id" exact={true} component={AddSource} />
        <Route path="/sources/:id" exact={true} component={SourceDetails} />
        <Route
          path="/sources/connect/:id"
          exact={true}
          component={ConnectSources}
        />
        <Route path="/sources/:id" exact={true} component={SourceDetails} />
        <Route path="/destinations" exact={true} component={Destinations} />
        <Route
          path="/destinations/setup"
          exact={true}
          component={AddDestination}
        />
        <Route
          path="/destinations/:id"
          exact={true}
          component={DestinationDetails}
        />
      </Switch>
    </Layout>
  );
})
Example #7
Source File: DataTableView.tsx    From querybook with Apache License 2.0 5 votes vote down vote up 
DataTableView = withRouter<IDataTableViewOwnProps>(
    connect(mapStateToProps, mapDispatchToProps)(DataTableViewComponent)
)
Example #8
Source File: DeployDetails.tsx    From casper-clarity with Apache License 2.0 5 votes vote down vote up 
DeployDetails = withRouter(_DeployDetails)
Example #9
Source File: BlockList.tsx    From casper-clarity with Apache License 2.0 5 votes vote down vote up 
BlockList = withRouter(_BlockList)
Example #10
Source File: BlockDetails.tsx    From casper-clarity with Apache License 2.0 5 votes vote down vote up 
BlockDetails = withRouter(_BlockDetails)
Example #11
Source File: Start.tsx    From json-schema-viewer with Apache License 2.0 5 votes vote down vote up 
Start = withRouter<StartProps, typeof StartWR>(StartWR)
Example #12
Source File: SchemaView.tsx    From json-schema-viewer with Apache License 2.0 5 votes vote down vote up 
SchemaView = withRouter<SchemaViewProps, typeof SchemaViewWR>(SchemaViewWR)
Example #13
Source File: BlockDetails.tsx    From clarity with Apache License 2.0 5 votes vote down vote up 
BlockDetails = withRouter(_BlockDetails)
Example #14
Source File: LoadSchema.tsx    From json-schema-viewer with Apache License 2.0 5 votes vote down vote up 
LoadSchema = withRouter<LoadSchemaProps, typeof LoadSchemaWR>(LoadSchemaWR)
Example #15
Source File: HeaderBar.tsx    From pPhone2 with MIT License 5 votes vote down vote up 
HeaderBar = withRouter(HeaderBarComponent)
Example #16
Source File: index.tsx    From generator-earth with MIT License 5 votes vote down vote up 
MainRouter = withRouter(MainRouterBase)
Example #17
Source File: Button.tsx    From dxvote with GNU Affero General Public License v3.0 5 votes vote down vote up 
LinkButton: any = withRouter(
  ({
    route,
    history,
    children,
    ...rest
  }: LinkButtonProps & RouteComponentProps) => {
    return (
      <Button
        onClick={() => {
          history.push(route);
        }}
        {...rest}
      >
        {children}
      </Button>
    );
  }
)
Example #18
Source File: Explorer.tsx    From clarity with Apache License 2.0 5 votes vote down vote up 
Explorer = withRouter(_Explorer)
Example #19
Source File: DeployInfoListDetails.tsx    From clarity with Apache License 2.0 5 votes vote down vote up 
DeployInfoListDetails = withRouter(_DeployInfoListDetails)
Example #20
Source File: DeployDetails.tsx    From clarity with Apache License 2.0 5 votes vote down vote up 
DeployDetails = withRouter(_DeployDetails)
Example #21
Source File: BlockList.tsx    From clarity with Apache License 2.0 5 votes vote down vote up 
BlockList = withRouter(_BlockList)
Example #22
Source File: index.tsx    From dxvote with GNU Affero General Public License v3.0 4 votes vote down vote up 
Header = observer(() => {
  const NavItem = withRouter(
    ({ route, history, children }: NavItemProps & RouteComponentProps) => {
      return (
        <div
          style={{ cursor: 'pointer' }}
          onClick={() => {
            history.push(route);
          }}
        >
          {' '}
          {children}{' '}
        </div>
      );
    }
  );

  const {
    context: { providerStore, blockchainStore, configStore, daoStore },
  } = useContext();

  const { active, account } = providerStore.getActiveWeb3React();

  const isTestingEnv = !window?.location?.href?.includes('dxvote.eth');

  const networkName = configStore.getActiveChainName();

  const { userRep, totalSupply } =
    active && blockchainStore.initialLoadComplete
      ? daoStore.getRepAt(account, providerStore.getCurrentBlockNumber())
      : { userRep: bnum(0), totalSupply: bnum(0) };
  const repPercentage = active
    ? userRep.times(100).div(totalSupply).toFixed(4)
    : bnum(0);

  // const votingMachines = configStore.getNetworkContracts().votingMachines;
  // const votingMachineTokens = _.uniq(
  //   Object.keys(votingMachines).map((votingMachineAddress, i) =>
  //     configStore
  //       .getTokensOfNetwork()
  //       .find(
  //         token => token.address === votingMachines[votingMachineAddress].token
  //       )
  //   )
  // );

  return (
    <NavWrapper>
      <NavSection>
        <NavItem route={`/${networkName}/proposals`}>
          <MenuItem>
            <img alt="dxdao" src={dxdaoIcon} />
            {isTestingEnv && <WarningDev>Testing Environment</WarningDev>}
          </MenuItem>
        </NavItem>
      </NavSection>
      {!active ? (
        <NavSection>
          <Web3ConnectStatus text="Connect Wallet" />
          <NavItem route={`/config`}>
            <a>
              <FiSettings style={{ margin: '0px 10px', color: '#616161' }} />
            </a>
          </NavItem>
        </NavSection>
      ) : blockchainStore.initialLoadComplete ? (
        <NavSection>
          {account && active && (
            <>
              {/* {useBalances(
                account
                  ? votingMachineTokens.map(votingMachineToken => ({
                      assetAddress: votingMachineToken.address,
                      fromAddress: account,
                    }))
                  : []
              ).map((votingMachineTokenBalance, i) => {
                return (
                  <ItemBox key={i}>
                    {formatCurrency(
                      normalizeBalance(votingMachineTokenBalance)
                    )}{' '}
                    {votingMachineTokens[i].symbol}{' '}
                  </ItemBox>
                );
              })} */}
              {repPercentage.toString() !== 'NaN' && (
                <ItemBox> {repPercentage.toString()} % REP </ItemBox>
              )}
            </>
          )}
          <Web3ConnectStatus text="Connect Wallet" />
          <NavItem route={`/${networkName}/info`}>
            <a>
              <FiBarChart2 style={{ margin: '0px 10px', color: '#616161' }} />
            </a>
          </NavItem>
          <NavItem route={`/config`}>
            <a>
              <FiSettings style={{ margin: '0px 10px', color: '#616161' }} />
            </a>
          </NavItem>
          {account && (
            <NavItem route={`/${networkName}/user/${account}`}>
              <a>
                <FiUser style={{ margin: '0px 10px', color: '#616161' }} />
              </a>
            </NavItem>
          )}
        </NavSection>
      ) : (
        <NavSection>
          <Web3ConnectStatus text="Connect Wallet" />
          <NavItem route={`/config`}>
            <a>
              <FiSettings style={{ margin: '0px 10px', color: '#616161' }} />
            </a>
          </NavItem>
        </NavSection>
      )}
    </NavWrapper>
  );
})