将 Ionic 中的 url 参数与 React 匹配

Posted 2023-03-13

【中文标题】将 Ionic 中的 url 参数与 React 匹配

【英文标题】：Matching url params in Ionic with React

【发布时间】：2020-04-16 16:18:57

【问题描述】：

我正在开发一个FunctionalComponent，它将在Ionic 和React 中呈现项目列表。该组件将被重复用于每种类型的项目状态。我将项目的状态作为url-param 传递。

我想获取url-param并将其显示为列表标题并使用它来调用匹配项的API。将List-Componenturl 参数的matchrenders 渲染为未定义。

如何获取组件中的url参数？

在 Dashboard.tsx:

上链接到 List-Page

<IonCard className="card-body" href="/list/onschedule">

App.tsx：

<IonRouterOutlet>
    <Route exact path="/login" component=Login />
    <Route exact path="/" render=() => <Redirect to="/dashboard" /> />
    <PrivateRoute path="/dashboard" component=Dashboard exact=true />
    <PrivateRoute path="/list/:status" component=List />
</IonRouterOutlet>

在PrivateRoute组件中，我为道具放置了console.log，它得到了参数：

List.tsx：

interface StatusMatchProps extends RouteComponentProps<
  status: string;
> 

const List: React.FunctionComponent<StatusMatchProps> = (match) => 
  console.log("match: " + match)

  return (
    <>
      <IonTitle>match.params.status</IonTitle>
  );
;

Chrome 的控制台输出：

【问题讨论】：

渲染列表组件 url 参数的匹配渲染为未定义。 列表组件是如何渲染的？是作为独立组件渲染还是在路径与声明的 PrivateRoute 的路径匹配时渲染？

【参考方案1】：

问题在于PrivateRouteComponent 没有传递道具。这是组件的工作版本：

interface PrivateRouteProps extends RouteProps 
  component: any


export const PrivateRoute: FunctionComponent<PrivateRouteProps> = ( component: Component, ...rest ) => (

<Route ...rest render=props => 
    const currentUser: string | null  =  localStorage.getItem("userID");

    if (!userID) 
        // not logged in so redirect to login page with the return url
        return <Redirect to= pathname: '/login', state:  from: props.location   />
    

    // authorised so return component
    return <Component ...props />
   />
);