来自 url 的 id 在路由组件中使用 privateroute 时显示为未定义

Question

我需要在 public 和私人模式下显示与指南相关的组件。我的意思是指南列表、创建指南、指南详细信息应该能够被任何人查看，但编辑指南页面应该只有经过身份验证的指南才能访问。为此，我尝试了以下方式

在主成分中

App.js

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

里面 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。它给了我不确定的。但是如果我在 App.js 中使用 <PrivateRoute path="/guides" component={Guides} /> 那么它就完美了。但我不希望整个指南部分是私有的，只有编辑部分、付款部分应该是私有的。

这是我的 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

或将女贞路更改为 return，如下所示。（将 ...rest 传递给路线）

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

来自 url 的 id 在路由组件中使用 privateroute 时显示为未定义

id from url is shown undefined when used privateroute inside route component

javascript

reactjs

react-router

react-router-v4