IonRouter или response-router-dom Не передает props.match через PrivateRoute - PullRequest
Новая
       88

IonRouter или response-router-dom Не передает props.match через PrivateRoute

0 голосов
/ 13 июля 2020

Я пытаюсь получить доступ к параметрам URL-адреса из компонента в проекте с помощью IonReactRouter. По какой-то причине параметр match в props просто отсутствует. Однако все остальные реквизиты присутствуют.

Я использую PrivateRoute, используя, как мне кажется, стандартную реализацию 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);

Приложение. 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>
);
})

1 Ответ

0 голосов
/ 15 июля 2020

Похоже, я неправильно использовал компонент:

Неправильно: 

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

Правильно: 

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