Идентификатор из URL-адреса отображается неопределенным, когда используется личная информация внутри компонента маршрута

Question

Мне нужно показать компоненты, связанные с руководствами, в общедоступном c и частном режиме. Я имею в виду список руководств, создание руководств, детали руководства должны просматривать все, но страница редактирования справки должна быть доступна только для аутентифицированных руководств. Для этого я попробовал следующий способ

В основном компоненте

Приложение. js

<Route path="/guides" component={Guides} />

И внутри Руководства. js

<Switch>
    <Route
        exact
        path={`${GUIDE_ROUTES.GUIDE_DEF}`}
        component={ListGuides}
    />
    <Route path={`${GUIDE_ROUTES.ADD_GUIDE}`} component={GuideForm} />
    <PrivateRoute
        path={`${GUIDE_ROUTES.EDIT_GUIDE}`}
        component={GuideForm}
    />
    <Route path={`${GUIDE_ROUTES.DETAIL_GUIDE}`} component={GuideDetail} />
</Switch>

URL-адрес в следующем формате

const GUIDE_DEF = "/guides";

export const GUIDE_ROUTES = {
  GUIDE_DEF,
  ADD_GUIDE: `${GUIDE_DEF}/new`,
  EDIT_GUIDE: `${GUIDE_DEF}/edit/:guideId`,
  DETAIL_GUIDE: `${GUIDE_DEF}/:guideId`,
};

При использовании <PrivateRoute path={ $ {GUIDE_ROUTES.EDIT_GUIDE} } component={GuideForm} /> Я не могу получить guideId. Это дает мне неопределенное. Но если я использовал <PrivateRoute path="/guides" component={Guides} /> в приложении. js, то он работает отлично. Но я не хочу, чтобы общий раздел руководств был приватным, только такие вещи, как редактирование, оплата должна быть приватной

Вот мой код для PrivateRoute

const PrivateRoute = ({ component: Component, render, ...rest }) => {
  const renderContent = props => {
    console.log("PROPS", props, rest);
    if (!isLogin()) {
      return (
        <Redirect
          to={{
            pathname: "/auth/login",
            state: { from: props.location }
          }}
        />
      );
    }

    return typeof render === "function" ? (
      render(props)
    ) : (
      <Component {...props} {...rest} />
    );
  };
  return <Route render={renderContent} />;
};

PrivateRoute.propTypes = {
  component: PropTypes.oneOfType([PropTypes.func, PropTypes.element])
    .isRequired,
  location: PropTypes.object,
  render: PropTypes.func
};

export default PrivateRoute;

Может кто-нибудь помочь мне в этом, пожалуйста?

Answer 1

В GuideForm вы можете получить доступ к guideId с помощью

props.computedMatch.params.guideId

или изменить собственный маршрут, чтобы вернуться, как показано ниже. (Передать ...rest в маршрут)

<Route {...rest} render={renderContent} />