Почему React Router this.props.match.param не существует?

Question

[AplexPlex]

Не получается передать параметры в url при использовании react-router.
Github

<Switch>
      <Route exact path='/:id' component={ HocLoginComponet(LoginPage) } />
      <Route path='/student/test/:id' component={RouterComponentHOC(withAppLayout(<TesterForm />))}/>
      <Route path='/student' component={ RouterComponentHOC(withAppLayout(StudentForm)) }/>
      <Route path='/admin' component={ RouterComponentHOC(AdminPage)} />
      <Route path='/teacher' component={ RouterComponentHOC(TeacherPage)} />
      <Route path='*' component={NotFoundPage}/>
    </Switch>

Здесь указываю динамический путь к компоненту TesterForm при котором id передается в url и должен определятся как передаваемый параметр.

RouterComponentHOC

RouterComponentHOC
Это компонент для проверки авторизован пользователь или нет, и если нет отправляет на страницу авторизации.

Код RouterComponentHOC

import * as PropTypes from 'prop-types';
import * as React from 'react';
import { asyncComponent } from 'react-async-component';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { AuthActions, IDispatchProps } from '../actions/authActions';
import { getRoleRequestFetch } from '../api/hocAuthApi';
import { IAppState } from '../types';
import { LoadingComponent } from './LoadingComponent';

const HocComponet = (Component: any) => {
  return asyncComponent({
    resolve: async () => {
      const data = await getRoleRequestFetch();
      interface IStateProps {
        authState: boolean;
        role_type: string;
      }

      type TProps = IDispatchProps & IStateProps;
      class RetComp extends React.Component<TProps> {
        public static contextTypes = {
          router: PropTypes.object,
        };
        constructor(props: any, context: any) {
          super(props, context);
        }
        public componentWillMount() {
          this.props.authActions.onUpdateAuth(data.auth, data.role_type);
        }
        public onRedirect = (url: string) => {
          return document.location.replace(url);
        }
        public onRoute = () => {
          if (data.role_type === `/${document.location.pathname.split('/')[1]}`) {
            return <Component/>;
          }
          return this.context.router.history.push('/404');
        }
        public render() {
          return <div> {
            !data.auth ? this.onRedirect('/') : this.onRoute()
          } </div>;
        }
      }
      function mapStateToProps(state: IAppState): IStateProps {
        return {
          authState: state.commonReducer.authState,
          role_type: state.commonReducer.role_type,
        };
      }

      function mapDispatchToProps(dispatch: Dispatch<IDispatchProps>): IDispatchProps {
        return {
          authActions: new AuthActions(dispatch),
        };
      }
      return connect(mapStateToProps, mapDispatchToProps)(RetComp);
    },
    LoadingComponent: () => <LoadingComponent/>,
  });
};
export default HocComponet;

withAppLayout

router.tsx

const withAppLayout = (Component: any) => (props: any) => <StudentPage><Component {...props} /></StudentPage>;

StudentPage.tsx

import * as React from 'react';

export class StudentPage extends React.Component {
  public render() {
    return <div className='container'>
      {this.props.children}
    </div>;
  }
}

Но не понимаю как получить данные параметры т.к. в компоненте расположенному по данному urlвыдает ошибку что this.props.match не существует.

import * as PropTypes from 'prop-types';
import * as React from 'react';
import { connect } from 'react-redux';
import { Dispatch } from 'redux';
import { IDispatchProps, StudentActions } from '../../actions/studentActions';
import { IAppState } from '../../types';
import { AnswerForm } from './AnswerForm';

interface IStateProps {
  serverConnectError: boolean;
  serverDataError: boolean;
  authState: boolean;
  activeTest: number;
  testIssuesList: [object];
  testState: [object];
}

type TProps = IDispatchProps & IStateProps;

class TesterForm extends React.Component<TProps> {
  public static contextTypes = {
    router: PropTypes.object,
  };
  constructor(props: any, context: any) {
    super(props, context);
  }
  public componentWillMount() {

    this.props.studentActions.getTestIssues(this.props.activeTest);
  }

  public render() {
    return(
      <div className='row'>
        <AnswerForm />
      </div>
    );
  }
}

function mapStateToProps(state: IAppState): IStateProps {
  return {
    serverConnectError: state.commonReducer.serverConnectError,
    serverDataError: state.commonReducer.serverDataError,
    authState: state.commonReducer.authState,
    activeTest: state.studentReducer.activeTest,
    testIssuesList: state.studentReducer.testIssuesList,
    testState: state.studentReducer.testState,
  };
}

function mapDispatchToProps(dispatch: Dispatch<IDispatchProps>): IDispatchProps {
  return {
    studentActions: new StudentActions(dispatch),
  };
}

const connectApp = connect(mapStateToProps, mapDispatchToProps)(TesterForm);

export {connectApp as TesterForm};

Answer 1

[Антон Спирин]

Вы не передаете в компонент props.

public onRoute = () => {
  if (data.role_type === `/${document.location.pathname.split('/')[1]}`) {
    return <Component/>;  // тут ничего не передается
  }
  return this.context.router.history.push('/404');
}

так должно работать:

public onRoute = () => {
  if (data.role_type === `/${document.location.pathname.split('/')[1]}`) {
    return <Component {...this.props} />;
  }
  return this.context.router.history.push('/404');
}

Как альтернативу HOC можно сделать обертку над Routе, применив композицию.

<AuthRoute path='/some_path' component={SomeComponent} />

Зачем вы используете context в компоненте дочернем router остается загадкой.

Comments

[AplexPlex]

Спасибо.

[AplexPlex]

Я все еще изучаю React да и вообще TS хотел спросить.
Как можно без использования контекста перейти на другую страницу но при этом сохранить состояние приложения ?
И какие преимущиства в реализации проверки авторизации через Route , а не через HOC?

[Антон Спирин]

AplexPlex, в компоненте дочернем Route history, match и location доступны в props.
Но их надо указать в типах.

import {RouteComponentProps} from "react-router";

interface OwnProps {}

type Props = OwnProps & RouteComponentProps<any>;

class Example extends React.Component<Props> {}

Так же есть HOC with роутер для компонентов не дочерних Router. Тут уж смотрите сами что удобней withRouter + добавление в типы RouteComponentProps или контекст.

И какие преимущиства в реализации проверки авторизации через Route , а не через HOC?

Главное преимущество семантика. Сразу видно, что это AuthRoute. В случае с HOC приходится тратить время на их анализ. Композиция в ряде случаев будет предпочтительней HOC.

[AplexPlex]

Спасибо за помощь.
Попробую переписать через Router.
Читал в документации Router что не очень правильно использовать context но не мог понять как обойтись без него. И толком не понял почему не нужно использовать context?

[AplexPlex]

И по поводу композиции хотел уточнить. Это получается что нужно чтобы при переходе на любой маршрут сначала запрос должен пере напросятся в компонент который будет проверять авторизацию и на его основе переходить по нужному маршруту?

[Антон Спирин]

AplexPlex, по поводу контекста, они, видимо, имеют ввиду, что не правильно использовать реализацию. Ведь ничто не мешает им ее изменить оставит нетронутым API. В итоге версия изменится, допустим с 4.3.1 на 4.3.2, а проект ваш больше не запустится, пока не внесете исправления. При использовании API библиотеки(withRouter), такого не случится по крайней мере до выхода react-router 5.

По поводу композиции, простой пример:

const PrivateRoute = ({ isAuthenticated, component: Component, ...rest }) => (
  <Route {...rest} render={(Rouprops) => (
    isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to='/login' />
  )} />
);

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

export default connect(mapStateToProps)(PrivateRoute);

[AplexPlex]

А разве это не является HOC? Это функция которая получает компонент в качестве параметра и возвращает его в случае если пользователь авторизован?

[AplexPlex]

Или нужно по сути написать HOC но не для моих собственных компонентов, а для Route?

[Антон Спирин]

AplexPlex, это обычный компонент. Тут применяется прием композиции. В HOC применяется каррирование. Просто компонент в примере функциональный и отличий немного. Главное же отличие, это то что HOC вызывают как функцию передавая в него компонент.
export default someHOC(SomeComponent);
А такой компонент используется как компонент:

<PrivateRoute path="/somePath" component={SomeComponent} />;

[Антон Спирин]

AplexPlex, переписав на Class Component получим:

class PrivateRoute extends React.Component {
  render() {
    const { isAuthenticated, component: Component, ...rest } = this.props;

    return (
      <Route {...rest} render={(Rouprops) => (
        isAuthenticated === true
          ? <Component {...props} />
          : <Redirect to='/login' />
      )} />
    );
  }
}

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

export default connect(mapStateToProps)(PrivateRoute);

думаю в таком виде отличия от HOC видно наглядней.

[AplexPlex]

Спасибо большое. Я понял в чем отличие от HOC. HOC получает компонент в качестве параметра и возвещает его же но модифицированный. А здесь идет расширение возможностей Route.
Если честно пока не совсем понял как это реализовать на практике. Так что буду сидеть разбираться. И еще раз большое спасибо.

Answer 2

[AplexPlex]

Помимо этого я неправильно пытался получить данные.
Я пытался получить данные через.
this.props.match.param
Но match не существовало. Не знаю почему но при использовании connect Redux параметры передаются через него.

import * as PropTypes from 'prop-types';
import * as React from 'react';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router-dom';
import { Dispatch } from 'redux';
import { IDispatchProps, StudentActions } from '../../actions/studentActions';
import { IAppState } from '../../types';
import { AnswerForm } from './AnswerForm';

interface IStateProps {
  serverConnectError: boolean;
  serverDataError: boolean;
  authState: boolean;
  activeTest: number;
  testIssuesList: [object];
  testState: [object];
  id: number;
}

interface IRouterProps {
  id: number;
}

type IProps = IStateProps & IRouterProps;

type TProps = IDispatchProps & IStateProps;

class TesterForm extends React.Component<TProps> {
  public static contextTypes = {
    router: PropTypes.object,
  };
  constructor(props: any, context: any) {
    super(props, context);
  }
  public componentWillMount() {
    alert(this.props.id);
    this.props.studentActions.getTestIssues(this.props.activeTest);
  }

  public render() {
    return(
      <div className='row'>
        <AnswerForm/>
      </div>
    );
  }
}

function mapStateToProps(state: IAppState, ownProps: RouteComponentProps<IRouterProps>): IProps {
  return {
    serverConnectError: state.commonReducer.serverConnectError,
    serverDataError: state.commonReducer.serverDataError,
    authState: state.commonReducer.authState,
    activeTest: state.studentReducer.activeTest,
    testIssuesList: state.studentReducer.testIssuesList,
    testState: state.studentReducer.testState,
    id: ownProps.match.params.id, // Здесь передаются параметрвы
  };
}

function mapDispatchToProps(dispatch: Dispatch<IDispatchProps>): IDispatchProps {
  return {
    studentActions: new StudentActions(dispatch),
  };
}

const connectApp = connect(mapStateToProps, mapDispatchToProps)(TesterForm);

export {connectApp as TesterForm};