react-router-dom#RouteComponentProps TypeScript Examples

The following examples show how to use react-router-dom#RouteComponentProps. 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: redirects.tsx    From cuiswap with GNU General Public License v3.0 7 votes vote down vote up
export function RedirectOldAddLiquidityPathStructure(props: RouteComponentProps<{ currencyIdA: string }>) {
  const {
    match: {
      params: { currencyIdA }
    }
  } = props
  const match = currencyIdA.match(OLD_PATH_STRUCTURE)
  if (match?.length) {
    return <Redirect to={`/add/${match[1]}/${match[2]}`} />
  }

  return <AddLiquidity {...props} />
}
Example #2
Source File: BaseContainer.tsx    From generator-earth with MIT License 6 votes vote down vote up
/**
 * 普通container的基类
 * 已包装所在路由的前缀
 */
export default class BaseContainer<P={}, S={}> extends Component<P & RouteComponentProps, S> {
    
    static contextType = BaseContext
    
    /**
     * 可以使用  this.context.CONTAINER_ROUTE_PREFIX 获取 routeContainerHOC提供的路径前缀
     * 如
    instanceMethod() {
        console.log(this.context.CONTAINER_ROUTE_PREFIX)
    }
     */
    
    sleep(n=0) {
        return new Promise(resolve=>{
            setTimeout( ()=>resolve(), n )
        })
    }
}
Example #3
Source File: redirects.tsx    From cuiswap with GNU General Public License v3.0 6 votes vote down vote up
export function RedirectDuplicateTokenIds(props: RouteComponentProps<{ currencyIdA: string; currencyIdB: string }>) {
  const {
    match: {
      params: { currencyIdA, currencyIdB }
    }
  } = props
  if (currencyIdA.toLowerCase() === currencyIdB.toLowerCase()) {
    return <Redirect to={`/add/${currencyIdA}`} />
  }
  return <AddLiquidity {...props} />
}
Example #4
Source File: signin.tsx    From microsoft-teams-apps-growyourskills with MIT License 6 votes vote down vote up
SignInPage: React.FunctionComponent<RouteComponentProps> = props => {
    const localize = useTranslation().t;
    const errorMessage = "Please sign in to continue.";

    function onSignIn() {
        microsoftTeams.initialize();
        microsoftTeams.authentication.authenticate({
            url: window.location.origin + "/signin-simple-start",
            successCallback: () => {
                console.log("Login succeeded!");
                window.location.href = "/discover";
            },
            failureCallback: (reason) => {
                console.log("Login failed: " + reason);
                window.location.href = "/errorpage";
            }
        });
    }

    return (
        <div className="sign-in-content-container">
            <div>
            </div>
            <Text
                content={errorMessage}
                size="medium"
            />
            <div className="space"></div>
            <Button content={localize("signInText")} primary className="sign-in-button" onClick={onSignIn} />
        </div>
    );
}
Example #5
Source File: dashboard.tsx    From NetStatus with MIT License 6 votes vote down vote up
route: IRoute = {
    path: "/dashboard",
    isShowing: (history: History) => util.historyMatchesLocation(history, route.path),
    component: (props: any) => <Controller {...props} />,
    navigate: (history: History, props?: RouteComponentProps<{}>) => { 
        if ( route.isShowing(history) ) { return; }  
        history.push(route.path) 
    }
}
Example #6
Source File: TwitterAccountQueryParamReader.tsx    From sybil-interface with GNU General Public License v3.0 6 votes vote down vote up
/**
 * Used for redirects from Twitter oauth server.
 * If twitter handle passed as query param, set in global state.
 * @param param0 twitter handle
 */
export default function TwitterAccountQueryParamReader({ location: { search } }: RouteComponentProps): null {
  const [, setTwitterAccount] = useTwitterAccount()

  useEffect(() => {
    if (!search) return
    if (search.length < 2) return

    const parsed = parse(search, {
      parseArrays: false,
      ignoreQueryPrefix: true,
    })

    const username = parsed.username

    if (typeof username !== 'string') return

    setTwitterAccount(username)
  }, [search, setTwitterAccount])

  return null
}
Example #7
Source File: view.tsx    From kinopub.webos with MIT License 6 votes vote down vote up
View: React.FC<ViewProps> = ({ component, layout, ...props }) => {
  const Layout = useMemo(() => {
    if (layout === 'fill') {
      return FillLayout;
    }

    return MainLayout;
  }, [layout]);
  const render = useMemo<React.FC<RouteComponentProps>>(
    () => (routeProps) =>
      (
        <Layout>
          <Suspense fallback={<Spinner />}>{createElement(component!, routeProps)}</Suspense>
        </Layout>
      ),
    [component, Layout],
  );

  return <Route {...props} render={render} />;
}
Example #8
Source File: tabs.tsx    From bitpay-browser-extension with MIT License 6 votes vote down vote up
Tabs: React.FC<RouteComponentProps> = ({ location: { pathname } }) => {
  const routesVisible = ['/wallet', '/shop', '/settings'];
  const shouldShow = routesVisible.includes(pathname);

  return shouldShow ? (
    <div className="tab-bar">
      <NavLink to="/wallet" activeClassName="is-active">
        <img className="inactive" alt="wallet" src="../assets/icons/wallet-icon.svg" />
        <img className="active" alt="wallet" src="../assets/icons/wallet-icon--active.svg" />
      </NavLink>
      <NavLink to="/shop" activeClassName="is-active">
        <img className="inactive" alt="shop" src="../assets/icons/shop-icon.svg" />
        <img className="active" alt="shop" src="../assets/icons/shop-icon--active.svg" />
      </NavLink>
      <NavLink to="/settings" activeClassName="is-active">
        <img className="inactive" alt="settings" src="../assets/icons/settings-icon.svg" />
        <img className="active" alt="settings" src="../assets/icons/settings-icon--active.svg" />
      </NavLink>
    </div>
  ) : null;
}
Example #9
Source File: NotFoundPage.tsx    From iot-center-v2 with MIT License 6 votes vote down vote up
function NotFoundPage(props: RouteComponentProps) {
  return (
    <PageContent title={'Page ' + props.location.pathname + ' Not Found'}>
      <>
        Go <Link to="/">Home</Link>
      </>
    </PageContent>
  )
}
Example #10
Source File: Viewer.tsx    From zwo-editor with MIT License 6 votes vote down vote up
Viewer = ({ match }: RouteComponentProps<TParams>) => {

  const id = match.params.id
  const [workout, setWorkout] = useState()

  React.useEffect(() => {
    firebase.database().ref('workouts/' + id).once('value').then(function(snapshot) {
      setWorkout(snapshot.val().author)
    })
  })

  return (
    <div className="container">      
      {workout}
    </div>
  )
}
Example #11
Source File: route-metadata-provider.tsx    From malagu with MIT License 6 votes vote down vote up
protected renderLayout(map: Map<any, RouteMetadata>, props: RouteComponentProps<any>, routeMetadata: RouteMetadata) {
        let current = routeMetadata.component || routeMetadata.render;
        let realLayout: React.ReactNode | undefined;
        while (current) {
            if (realLayout) {
                const C = current as any;
                realLayout = <C>{realLayout}</C>;
            } else {
                if (routeMetadata.component) {
                    const C = routeMetadata.component as any;
                    realLayout = <C {...props}/>;
                } else {
                    realLayout = routeMetadata.render!(props);
                    if (!realLayout) {
                        return;
                    }
                }
            }

            const r = map.get(current);
            if (r) {
                current = r.layout;
            } else {
                break;
            }
        }

        return realLayout;
    }
Example #12
Source File: DarkModeQueryParamReader.tsx    From cheeseswap-interface with GNU General Public License v3.0 6 votes vote down vote up
export default function DarkModeQueryParamReader({ location: { search } }: RouteComponentProps): null {
  const dispatch = useDispatch<AppDispatch>()

  useEffect(() => {
    if (!search) return
    if (search.length < 2) return

    const parsed = parse(search, {
      parseArrays: false,
      ignoreQueryPrefix: true
    })

    const theme = parsed.theme

    if (typeof theme !== 'string') return

    if (theme.toLowerCase() === 'dark') {
      dispatch(updateUserDarkMode({ userDarkMode: true }))
    } else if (theme.toLowerCase() === 'light') {
      dispatch(updateUserDarkMode({ userDarkMode: false }))
    }
  }, [dispatch, search])

  return null
}
Example #13
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 #14
Source File: ShareArtifact.tsx    From client with GNU General Public License v3.0 6 votes vote down vote up
export function ShareArtifact({ match }: RouteComponentProps<{ artifactId: ArtifactId }>) {
  function load(dataStore: ReaderDataStore) {
    return dataStore.loadArtifactFromContract(match.params.artifactId);
  }

  return (
    <Share load={load}>
      {(artifact: Artifact | undefined, loading: boolean, error: Error | undefined) => {
        if (error) {
          return 'error';
        }

        if (loading) {
          return 'loading';
        }

        return JSON.stringify(artifact);
      }}
    </Share>
  );
}
Example #15
Source File: Login.tsx    From dwitter-frontend with Apache License 2.0 6 votes vote down vote up
Login: React.FC<RouteComponentProps> = (props) => {
  if (localStorage.getItem('user')) {
    return <Redirect to={'/'} />;
  }

  return (
    <div style={{ display: 'flex', justifyContent: 'center' }}>
      <Helmet>
        <title>Log in</title>
      </Helmet>
      <div style={{ maxWidth: pageMaxWidth, flex: 1, padding: 16 }}>
        <div
          style={{
            justifyContent: 'center',
            display: 'flex',
            flexDirection: 'row',
          }}
          className="card p-3"
        >
          <LoginForm
            onLogin={() => {
              props.history.push('/');
            }}
          />
        </div>
      </div>
    </div>
  );
}
Example #16
Source File: redirects.tsx    From dyp with Do What The F*ck You Want To Public License 6 votes vote down vote up
// Redirects from the /swap/:outputCurrency path to the /swap?outputCurrency=:outputCurrency format
export function RedirectToSwap(props: RouteComponentProps<{ outputCurrency: string }>) {
  const {
    location: { search },
    match: {
      params: { outputCurrency }
    }
  } = props

  return (
    <Redirect
      to={{
        ...props.location,
        pathname: '/home',
        search:
          search && search.length > 1
            ? `${search}&outputCurrency=${outputCurrency}`
            : `?outputCurrency=${outputCurrency}`
      }}
    />
  )
}
Example #17
Source File: ElementsPage.tsx    From frontegg-react with MIT License 6 votes vote down vote up
ElementsPage: FC<RouteComponentProps> = ({ match, location }) => {
  return (
    <div>
      <ElementMenu basePath={match.path} activeElement={location.pathname.split('/').slice(-1)[0]} />

      <Route exact path={`${match.path}/Accordion`}>
        <AccordionExample />
      </Route>
      {Object.keys(elements).map((elementType) => (
        <Route exact key={elementType} path={`${match.path}/${elementType}`}>
          <ExampleElement elementOption={elements[elementType as ElementType] as any} />
        </Route>
      ))}
    </div>
  );
}
Example #18
Source File: redirects.tsx    From glide-frontend with GNU General Public License v3.0 6 votes vote down vote up
export function RedirectOldAddLiquidityPathStructure(props: RouteComponentProps<{ currencyIdA: string }>) {
  const {
    match: {
      params: { currencyIdA },
    },
  } = props
  const match = currencyIdA.match(OLD_PATH_STRUCTURE)
  if (match?.length) {
    return <Redirect to={`/add/${match[1]}/${match[2]}`} />
  }

  return <AddLiquidity {...props} />
}
Example #19
Source File: AuthenticatedRoute.tsx    From glific-frontend with GNU Affero General Public License v3.0 6 votes vote down vote up
chatRoutes = (
  <Switch>
    <Route exact path="/chat/collection" component={() => <ChatInterface collectionId={-1} />} />
    <Route exact path="/chat/saved-searches/" component={() => <ChatInterface savedSearches />} />
    <Route
      exact
      path="/chat/saved-searches/:contactId"
      component={({ match }: RouteComponentProps<{ contactId: any }>) => (
        <ChatInterface savedSearches contactId={match.params.contactId} />
      )}
    />
    <Route
      exact
      path="/chat/:contactId"
      component={({ match }: RouteComponentProps<{ contactId: any }>) => (
        <ChatInterface contactId={match.params.contactId} />
      )}
    />
    <Route
      exact
      path="/chat/collection/:collectionId"
      component={({ match }: RouteComponentProps<{ collectionId: any }>) => (
        <ChatInterface collectionId={match.params.collectionId} />
      )}
    />
    <Route exact path="/chat" component={() => <ChatInterface />} />
  </Switch>
)
Example #20
Source File: redirects.tsx    From goose-frontend-amm with GNU General Public License v3.0 6 votes vote down vote up
export function RedirectOldRemoveLiquidityPathStructure({
  match: {
    params: { tokens },
  },
}: RouteComponentProps<{ tokens: string }>) {
  if (!OLD_PATH_STRUCTURE.test(tokens)) {
    return <Redirect to="/pool" />
  }
  const [currency0, currency1] = tokens.split('-')

  return <Redirect to={`/remove/${currency0}/${currency1}`} />
}
Example #21
Source File: index.tsx    From IOTA-2.0-DevNet-wallet with MIT License 6 votes vote down vote up
ReactDOM.render(
    (
        <Router>
            <Route
                exact={true}
                path="/"
                component={(props: RouteComponentProps) => (
                    <App {...props} configuration={config} />)}
            />
        </Router>
    ),
    document.getElementById("root")
);
Example #22
Source File: index.tsx    From foodie with MIT License 6 votes vote down vote up
Chat: React.FC<RouteComponentProps<{ username: string }>> = ({ match }) => {
    const { username } = match.params;
    const { target, user } = useSelector((state: IRootReducer) => ({
        target: state.chats.items.find(chat => chat.username === username),
        user: state.auth
    }));

    return !target ? <PageNotFound /> : (
        <div className="relative w-full h-screen pt-14">
            <ChatBox
                user={user}
                target={target}
            />
        </div>
    );
}
Example #23
Source File: Navigation.tsx    From Apni-Dukan-Frontend with MIT License 6 votes vote down vote up
currentTab = (history: RouteComponentProps["history"], path: string) => {
  if (history.location.pathname === path) {
    return {
      color: "#ffc107",
    };
  } else {
    return {
      color: "#FFFFFF",
    };
  }
}
Example #24
Source File: redirects.tsx    From mozartfinance-swap-interface with GNU General Public License v3.0 6 votes vote down vote up
export function RedirectOldAddLiquidityPathStructure(props: RouteComponentProps<{ currencyIdA: string }>) {
  const {
    match: {
      params: { currencyIdA },
    },
  } = props
  const match = currencyIdA.match(OLD_PATH_STRUCTURE)
  if (match?.length) {
    return <Redirect to={`/add/${match[1]}/${match[2]}`} />
  }

  return <AddLiquidity {...props} />
}
Example #25
Source File: TopPlayers.tsx    From client with MIT License 6 votes vote down vote up
TopPlayers: React.FC<Props & RouteComponentProps> = ({ history }) => {
  const hof = useSelector((state: AppState) => state.rankings.hof);
  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(getHof());
  }, [dispatch]);

  return (
    <div className='TopPlayers'>
      {hof.loading ? (
        <ReactLoader />
      ) : hof.list ? (
        hof.list!.map((char, i: number) => (
          <CharacterCard key={i} char={char} history={history} />
        ))
      ) : (
        ''
      )}
    </div>
  );
}
Example #26
Source File: DataDocRoute.tsx    From querybook with Apache License 2.0 6 votes vote down vote up
DataDocRoute: React.FunctionComponent<RouteComponentProps> = () => (
    <Switch>
        <Route path="/:env/datadoc/:docId/" component={DataDocWrapper} />
        <Route path="/:env/datadoc/" exact={true}>
            <Redirect to="/" />
        </Route>
        <Route component={FourOhFour} />
    </Switch>
)
Example #27
Source File: NavigationBar.tsx    From wildduck-ui with MIT License 6 votes vote down vote up
/**
	 * componentDidUpdate
	 * @instance
	 */
	componentDidUpdate = (prevProps: Navigation.Props & RouteComponentProps) => {
		const currentPathName = this.props.location.pathname;
		if (currentPathName !== _.get(prevProps, 'location.pathname')) {
			this.props.actions.redirect(currentPathName.slice(1));
		}
	};
Example #28
Source File: redirects.tsx    From forward.swaps with GNU General Public License v3.0 6 votes vote down vote up
// Redirects from the /swap/:outputCurrency path to the /swap?outputCurrency=:outputCurrency format
export function RedirectToSwap(props: RouteComponentProps<{ outputCurrency: string }>) {
  const {
    location: { search },
    match: {
      params: { outputCurrency }
    }
  } = props

  return (
    <Redirect
      to={{
        ...props.location,
        pathname: '/swap',
        search:
          search && search.length > 1
            ? `${search}&outputCurrency=${outputCurrency}`
            : `?outputCurrency=${outputCurrency}`
      }}
    />
  )
}
Example #29
Source File: redirects.tsx    From vvs-ui with GNU General Public License v3.0 6 votes vote down vote up
export function RedirectOldAddLiquidityPathStructure(props: RouteComponentProps<{ currencyIdA: string }>) {
  const {
    match: {
      params: { currencyIdA },
    },
  } = props
  const match = currencyIdA.match(OLD_PATH_STRUCTURE)
  if (match?.length) {
    return <Redirect to={`/add/${match[1]}/${match[2]}`} />
  }

  return <AddLiquidity {...props} />
}