IonRouter 或 react-router-dom 不通过 PrivateRoute 传递 props.match答案

【问题标题】：IonRouter or react-router-dom Not Passing props.match via PrivateRouteIonRouter 或 react-router-dom 不通过 PrivateRoute 传递 props.match
【发布时间】：2020-11-02 17:24:53
【问题描述】：

我正在尝试使用 IonReactRouter 从项目中的组件内部访问 url 参数。由于某种原因，道具中的匹配参数不存在。但是，所有其他道具都存在。

我正在使用我认为是标准的 react-router-dom PrivateRoute 实现的 PrivateRoute。

私人路线：

import React from "react";
import { Route, Redirect } from "react-router-dom";
import { connect } from "react-redux";

// A wrapper for <Route> that redirects to the login
// screen if you're not yet authenticated.
const PrivateRoute = ({ Component, ...rest }) => {
  const { user } = rest;
  return (
    <Route
      {...rest}
      render={(props) => {
        if (user !== null) {
          // return React.cloneElement(children, { ...rest });
          return <Component {...props} />
        }
        return (
          <Redirect
            to={{
              pathname: "/",
              state: { from: props.location },
            }}
          />
        );
      }}
    />
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.auth.user,
  };
};

export default connect(mapStateToProps)(PrivateRoute);

App.js 路由：

return (
  <IonApp className="app">
    <IonReactRouter>
      <Switch>
        <Route
          exact
          path="/"
          render={(props) => {
            return appLoading == true && user == null ? (
              <Loader />
            ) : user !== null ? (
              <Dashboard {...props} />
            ) : (
              <Auth />
            );
          }}
        />
        <IonRouterOutlet>
          <PrivateRoute exact path="/Dashboard/:id">
            <Dashboard />
          </PrivateRoute>
          ...
        </IonRouterOutlet>
      </Switch>
    </IonReactRouter>
  </IonApp>
);

};

链接到组件提取：

return (
    <ResultWrap key={i}>
      <IonItem routerLink={`/Dashboard/${item.id}`}>
        <SearchResult>{item.title}</SearchResult>
      </IonItem>
      <Type>
        <TypeWrap>{item.type}</TypeWrap>
      </Type>
    </ResultWrap>
);
})

【问题讨论】：

标签： ionic-framework react-router react-router-dom

【解决方案1】：

看来是我用错了组件：

错误的方式：

<PrivateRoute exact path="/Dashboard/:id">
  <Dashboard />
</PrivateRoute>

正道：

<PrivateRoute exact path="/Dashboard/:id" component={Dashboard}>

【讨论】：