Javascript 使用嵌套/登录和/注册路由实现身份验证路由

我想用react router dom实现简单的

signin/signup

routs

这是App.js的

<div className="App">
      <Switch>
        <Route exact path="/" component={HomePage} />
        <Route exact path="/auth" component={SignInSignUpPage} />
      </Switch>
    </div>

这将依次呈现正确的组件：

const SignInSignUpContainer = ({ match, children, history }) => {
  const { isExact } = match;

  return (

      <SignInSignUpContainerContent>
        <SignInSignUpContainerContentForm>
          <LockIconContainer iconName="icon-lock-closed" />
          {children}
        </SignInSignUpContainerContentForm>
      </SignInSignUpContainerContent>
  );
};

const signingupcontainer=（{match，children，history}）=>{
常数{isExact}=match；
返回(
{儿童}
);
};

---

我一定是做错了，react router dom文档正在寻址受保护的路由，我觉得这不适合这种情况

仅从结构来看：您没有将

match

prop down发送到

signingupcontainer

，而且似乎

signingupcontainer

需要它

应该是：

  const SignInSignUpPage = ({ match }) => {
  return (
    <SignInSignUpContainer match={match}>
      <Route path={`${match.path}`} component={SignIn} />
      <Route path={`${match.path}/signup`} component={SignUp} />
    </SignInSignUpContainer>
  );
};

const signinguppage=（{match}）=>{
返回(
);
};

与

history

prop相同

const SignInSignUpContainer = ({ match, children, history }) => {
  const { isExact } = match;

  return (

      <SignInSignUpContainerContent>
        <SignInSignUpContainerContentForm>
          <LockIconContainer iconName="icon-lock-closed" />
          {children}
        </SignInSignUpContainerContentForm>
      </SignInSignUpContainerContent>
  );
};

  const SignInSignUpPage = ({ match }) => {
  return (
    <SignInSignUpContainer match={match}>
      <Route path={`${match.path}`} component={SignIn} />
      <Route path={`${match.path}/signup`} component={SignUp} />
    </SignInSignUpContainer>
  );
};