IonRouter or react-router-dom Not Passing props.match via PrivateRoute

Question

I am trying to access url params from inside a component in a project using IonReactRouter. For some reason the match param in props is just not present. All other props are present however.

I am using a PrivateRoute using what I believe to be the standard react-router-dom PrivateRoute implementation.

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 routes:

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

};

Link to component extract:

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

user8467470 user8467470 · Accepted Answer · 2020-07-14T22:23:40

It seems that I was using the component incorrectly:

Wrong way:

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

Right way:

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

IonRouter or react-router-dom Not Passing props.match via PrivateRoute

1 Answers