react-router-dom#RouteComponentProps TypeScript Examples

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} />
}

/**
 * 普通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 )
        })
    }
}

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} />
}

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>
    );
}

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) 
    }
}

/**
 * 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
}

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} />;
}

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;
}

function NotFoundPage(props: RouteComponentProps) {
  return (
    <PageContent title={'Page ' + props.location.pathname + ' Not Found'}>
      <>
        Go <Link to="/">Home</Link>
      </>
    </PageContent>
  )
}

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>
  )
}

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;
    }

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
}

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;
})

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>
  );
}

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>
  );
}

// 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}`
      }}
    />
  )
}

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>
  );
}

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} />
}

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>
)

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}`} />
}

ReactDOM.render(
    (
        <Router>
            <Route
                exact={true}
                path="/"
                component={(props: RouteComponentProps) => (
                    <App {...props} configuration={config} />)}
            />
        </Router>
    ),
    document.getElementById("root")
);

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>
    );
}

currentTab = (history: RouteComponentProps["history"], path: string) => {
  if (history.location.pathname === path) {
    return {
      color: "#ffc107",
    };
  } else {
    return {
      color: "#FFFFFF",
    };
  }
}

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} />
}

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>
  );
}

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>
)

/**
	 * 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));
		}
	};

// 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}`
      }}
    />
  )
}

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} />
}